GDPR Cookie Consent Banner
Full-featured cookie consent with automatic detection and real cookie management.
- Auto-detects cookies
- GDPR Compliant
- Actually deletes cookies
- Blocks tracking scripts
Why it works?
Unlike basic cookie banners that only show a UI, this component actually manages cookies by detecting them, categorizing them, and deleting non-consented cookies in real-time. It integrates with Google Analytics consent mode and other tracking scripts.
Key Benefits
- Automatically detects all cookies in your application
- Actually enforces user consent by deleting cookies
- Integrates with Google Analytics Consent Mode
- Shows live count of cookies per category
- Plug-and-play - just add to your layout
- Stores preferences across sessions
Perfect for
- Any website that needs GDPR compliance
- Applications with analytics tracking
- Sites with marketing cookies
- Privacy-conscious applications
See It In Action
The banner automatically detects cookies and lets users control them by category. Clear your browser cookies to see the initial banner.
Cookie Banner Demo
Check browser console for cookie management logs
pnpm dlx shadcn@latest add https://ux.koszyka.com/r/CookieBanner.json
Quick Start
- 1. Install the component using the CLI command above.
- 2. Add <CookieBanner /> to your root layout.
- 3. Customize cookie categories in lib/cookie-manager.ts if needed.
- 4. The component will automatically detect and manage all cookies.
Configuration
| Prop | Type | Required | Description |
|---|---|---|---|
| DEFAULT_COOKIE_CONFIGS | CookieConfig[] | Optional | Array of cookie configurations that define which cookies belong to which category. Edit in lib/cookie-manager.ts. |
Source Code
Loading code…