Cookie Consent Banner React component
A cookie consent banner as a corner card or a bottom bar: accept all, reject all with equal weight, or open per-category switches (necessary locked on), and the choice is remembered, with a small button to change it later.
When to use the Cookie Consent Banner component
Use Cookie Consent Banner on any site that sets analytics, advertising or other non-essential cookies and needs the visitor's permission first. Reject is as easy as Accept, and people can pick categories one by one.
Load your scripts from onConsentChange rather than on page load, so nothing optional runs until the visitor says yes. Change storageKey when your cookie policy changes to ask everyone again.
Installation
Add the Cookie Consent Banner component to your project with the shadcn CLI. It lands in components/cookie-consent-banner.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add https://reactframe.com/r/cookie-consent-banner.jsonOr copy the source by hand and install its dependencies:
npm install motion clsx tailwind-mergeProps
<CookieConsentBanner /> accepts 15 props, all optional.
| Prop | Type | Default |
|---|---|---|
| categories | { id: string; label: string; description: string; required?: boolean; defaultEnabled?: boolean }[] | DEFAULT_CATEGORIES |
| title | string | "We use cookies" |
| message | string | "We use cookies to run the site, understand how it's used and, with your permission, to p… |
| policyHref | string | "/privacy" |
| policyLabel | string | "Cookie policy" |
| variant bar: full width along the bottom. card: a floating card in a corner. | "bar" | "card" | "card" |
| position | "left" | "right" | "left" |
| onConsentChange Called with every category's on/off once the visitor chooses. | (consent: CookieConsent) => void | — |
| storageKey Where the choice is remembered. Set to "" to not remember it (e.g. previews). | string | "cookie-consent" |
| forceOpen Show it even if a choice is already stored. | boolean | false |
| delay Seconds to wait before it slides in. | number | 0.6 |
| showReopen A small button that reopens the settings after a choice. | boolean | true |
- categories{ id: string; label: string; description: string; required?: boolean; defaultEnabled?: boolean }[]Default: DEFAULT_CATEGORIES
- titlestringDefault: "We use cookies"
- messagestringDefault: "We use cookies to run the site, understand how it's used and, with your permission, to p…
- policyHrefstringDefault: "/privacy"
- policyLabelstringDefault: "Cookie policy"
- variant
bar: full width along the bottom. card: a floating card in a corner.
"bar" | "card"Default: "card" - position"left" | "right"Default: "left"
- onConsentChange
Called with every category's on/off once the visitor chooses.
(consent: CookieConsent) => void - storageKey
Where the choice is remembered. Set to "" to not remember it (e.g. previews).
stringDefault: "cookie-consent" - forceOpen
Show it even if a choice is already stored.
booleanDefault: false - delay
Seconds to wait before it slides in.
numberDefault: 0.6 - showReopen
A small button that reopens the settings after a choice.
booleanDefault: true
Show all 15 propsShow fewer
| contained Place it inside the nearest positioned ancestor instead of the viewport. | boolean | false |
| theme | "dark" | "light" | "dark" |
| className | string | — |
- contained
Place it inside the nearest positioned ancestor instead of the viewport.
booleanDefault: false - theme"dark" | "light"Default: "dark"
- classNamestring
FAQ
- Where is the choice stored?
- In localStorage under storageKey ("cookie-consent" by default) as { category: true/false }. On the next visit it reads that and stays hidden. Pass storageKey="" to not store anything.
- Can people change their mind?
- Yes. With showReopen, a small cookie button sits in the corner after they choose; it reopens the banner with the category switches already open.
- Does it block scripts by itself?
- No. It collects and remembers the choice and calls onConsentChange; load or skip analytics and ad scripts there.
