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.
About the Cookie Consent Banner component
Cookie Consent Banner asks visitors for permission before optional cookies run. It slides in as a card in a corner or a bar along the bottom with Reject all and Accept all side by side, so saying no is as easy as saying yes. Customize opens a switch for each category, with strictly necessary cookies always on, and Save preferences stores the choice.
categories takes objects with id, label, description and optional required and defaultEnabled. title, message, policyHref and policyLabel set the text and the policy link. onConsentChange receives every category's on or off once the visitor decides, so you can load analytics or ad scripts then. The choice is stored in localStorage under storageKey and the banner stays hidden on later visits. showReopen leaves a small cookie button to change it, and delay sets the seconds before it appears.
When to use it
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 @reactframe/cookie-consent-bannerOr 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
npm dependencies
Installed for you by the shadcn CLI.
Cookie Consent Banner 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.
- Where does the policy link go?
- To policyHref, which is /privacy by default. Point it at your real cookie or privacy policy page, or pass an empty string to hide the link.
