Cookie Consent
GDPR-friendly cookie banner with equal choices and per-category toggles.
Cookie Consent is a banner that respects people: Accept all and Reject all carry equal weight, Customize expands per-category switches in place, the choice is remembered, and the page is never blocked. It slides up once, after the page has settled.
Preview
Installation
pnpm dlx shadcn@latest add https://ui.cuelark.com/r/cookie-consent.jsonThe CLI also installs the Cuelark theme tokens, the GSAP motion layer and the components it builds on. With the @cuelark namespace configured, use @cuelark/cookie-consent.
Builds on: motion, switch
Usage
import { CookieConsent } from "@/components/ui/cookie-consent";
<CookieConsent onConsent={(c) => c.analytics && loadAnalytics()} />Motion
Slides up once after load; the customize panel expands in place.
Scale it with --cl-motion (0 off, 1 default, 1.5 expressive) on any ancestor. Reduced-motion preferences always switch it off.
API reference
CookieConsent
| Prop | Type | Default | Description |
|---|---|---|---|
| categories | { id; label; description; required? }[] | necessary, analytics, marketing | Consent groups. |
| onConsent | (consent: Record<string, boolean>) => void | — | The choice. |
| storageKey | string | "cookie-consent" | localStorage key. |
| persist | boolean | true | Remember the choice. |
| inline | boolean | false | Render in place. |
Accessibility
- A labelled region, not a modal: it never traps focus or blocks reading.
- Reject is as easy as Accept, as GDPR guidance expects.
FAQ
Also searched as: cookie consent banner react · shadcn cookie consent · gdpr cookie banner · cookie popup react · cookie preferences component