BlockDex

Components

Registries

Free blocks

Method

BlockDex

Components

Registries

Free blocks

Method

Open API

BlockDex

Components

Registries

Free blocks

Method

Open API

Components/openconsent/cookie-consent

cookie-consent

openconsent/cookie-consent
FreeBlock

A full-featured, GDPR-compliant cookie consent solution with traceability support, script management, and granular category control.

Live preview

live · rendered by the registry
Rendered by openconsent on their own page — this is the component running, not a screenshot of it.

Install it

npx shadcn@latest add https://openconsent.dev/r/cookie-consent.json

Source

components/cookie-consent/cookie-provider.tsxopenconsent.dev/r/cookie-consent.json · first 6 KB
1"use client";
2
3import * as React from "react";
4import { GoogleConsentMode } from "./google-consent-mode";
5import {
6 hasGoogleScripts as checkHasGoogleScripts,
7 getLoadedScripts,
8 loadConsentedScripts,
9 registerScript as registerScriptInternal,
10 unloadRevokedScripts,
11 unregisterScript as unregisterScriptInternal,
12} from "./script-manager";
13import { retryFailedRecords, trackConsent } from "./tracker";
14import type {
15 CategoryConfig,
16 ConsentCategories,
17 ConsentCategory,
18 ConsentChangeEvent,
19 ConsentState,
20 CookieConsentConfig,
21 CookieConsentContextValue,
22 GoogleConsentModeConfig,
23 ScriptConfig,
24} from "./types";
25import {
26 calculateExpirationDate,
27 clearConsentState,
28 getAllAcceptedCategories,
29 getDefaultCategories,
30 getVisitorId,
31 isGoogleScript,
32 loadConsentState,
33 saveConsentState,
34} from "./utils";
35
36const CookieConsentContext =
37 React.createContext<CookieConsentContextValue | null>(null);
38
39export const defaultCategories: CategoryConfig[] = [
40 {
41 key: "necessary",
42 title: "Necessary",
43 description:
44 "Essential cookies required for the website to function properly. These cannot be disabled.",
45 required: true,
46 },
47 {
48 key: "analytics",
49 title: "Analytics",
50 description:
51 "Cookies that help us understand how visitors interact with our website.",
52 },
53 {
54 key: "marketing",
55 title: "Marketing",
56 description: "Cookies used for advertising and tracking across websites.",
57 },
58 {
59 key: "preferences",
60 title: "Preferences",
61 description: "Cookies that remember your settings and preferences.",
62 },
63];
64
65interface CookieConsentProviderProps {
66 children: React.ReactNode;
67 config: CookieConsentConfig;
68}
69
70export function CookieConsentProvider({
71 children,
72 config,
73}: CookieConsentProviderProps) {
74 const [state, setState] = React.useState<ConsentState>(() => ({
75 hasConsented: false,
76 categories: getDefaultCategories(),
77 lastUpdated: null,
78 consentVersion: config.consentVersion,
79 visitorId: "",
80 }));
81 const [isBannerVisible, setIsBannerVisible] = React.useState(false);
82 const [isSettingsOpen, setIsSettingsOpen] = React.useState(false);
83 const [isInitialized, setIsInitialized] = React.useState(false);
84 const [hasGoogleScripts, setHasGoogleScripts] = React.useState(false);
85
86 const previousCategoriesRef = React.useRef<ConsentCategories>(
87 getDefaultCategories()
88 );
89
90 // Auto-enable Google Consent Mode if Google scripts are detected
91// … truncated

What it pulls in

Other registry items

  • button
  • dialog
  • switch
  • card
  • label
  • accordion

Files it writes

  • components/cookie-consent/cookie-provider.tsx
  • components/cookie-consent/cookie-banner.tsx
  • components/cookie-consent/cookie-settings.tsx
  • components/cookie-consent/cookie-trigger.tsx
  • components/cookie-consent/consent-script.tsx
  • components/cookie-consent/index.ts
  • components/cookie-consent/types.ts
  • components/cookie-consent/utils.ts
  • components/cookie-consent/use-cookie-consent.ts
  • components/cookie-consent/use-consent-script.ts
  • components/cookie-consent/script-manager.ts
  • components/cookie-consent/tracker.ts

Facts

Registry
openconsent
Type
registry:block
Access
Free
Files written
12
Licence
MIT
First indexed
2026-08-03
Last confirmed
today

Go to the source

Docs on openconsent openconsent.dev yhauxell/open-cookie-consent-banner on GitHub Raw registry item This item as JSON
BlockDex

Built by

Kynth Studio

Index

Components
Registries
Method
Open API

Guides

shadcn component libraries
Best shadcn registries
Free shadcn blocks

Reference

Corpus counts
Crawl health
hello@kynth.studio
Privacy
Terms

BlockDex

BlockDex

Built by

Kynth Studio

Index

Components
Registries
Method
Open API

Guides

shadcn component libraries
Best shadcn registries
Free shadcn blocks

Reference

Corpus counts
Crawl health
hello@kynth.studio
Privacy
Terms

BlockDex

BlockDex

Built by

Kynth Studio

Index

Components
Registries
Method
Open API

Guides

shadcn component libraries
Best shadcn registries
Free shadcn blocks

Reference

Corpus counts
Crawl health
hello@kynth.studio
Privacy
Terms

BlockDex