[ [UI.73] Components ] Cookie Consent

Cookie Consent

> GDPR/Privacy compliance banner with granular consent preferences.

Import

[ [0x5B] IMPORT ]

1import { CookieConsent } from "@/components/ui/cookie-consent"

Preview

[ [0x00] COOKIE CONSENT ]

[0x09] COOKIE_POLICY

> We use cookies for analytics. Privacy

1<CookieConsent
2  onAccept={(preferences) => saveCookiePreferences(preferences)}
3  privacyPolicyUrl="/privacy"
4/>

Variants

[ [0x00] DEFAULT BANNER ]

[0x09] COOKIE_POLICY

> We use cookies for analytics. Privacy

1<CookieConsent />

[ [0x00] WITH CALLBACKS ]

[0x09] COOKIE_POLICY

> We use cookies for analytics. Privacy

1<CookieConsent
2  onAccept={(prefs) => saveCookiePreferences(prefs)}
3  onReject={() => clearNonEssentialCookies()}
4  privacyPolicyUrl="/privacy"
5  cookiePolicyUrl="/cookies"
6/>

API Reference

[ [0x00] API REFERENCE ]

Prop	Type	Default	Description
onAccept	`(preferences: CookiePreferences) => void`	-	Called when user accepts cookies with their preferences.
onReject	`() => void`	-	Called when user rejects all non-essential cookies.
privacyPolicyUrl	`string`	`"/privacy"`	URL to privacy policy page.
cookiePolicyUrl	`string`	`"/cookies"`	URL to cookie policy page.
className	`string`	-	Additional CSS classes.

Accessibility

[ [0x58] A11Y ]

Uses role="dialog" for screen reader announcement
aria-live="polite" announces banner appearance
aria-label describes the banner purpose
Respects Do Not Track (DNT) browser setting
Focus management for keyboard navigation
Switch components for preference toggles have aria-labels

Cookie Preferences

[ [0x2C] PREFERENCE TYPES ]

[NECESSARY]

Essential cookies required for the website to function. Always enabled.

[ANALYTICS]

Help understand how visitors interact with the website.

[MARKETING]

Track visitors across websites for relevant ads.

[PREFERENCES]

Remember settings like theme, language, and region.

Features

[ [0xC4] GDPR COMPLIANCE ]

• Granular consent via customize modal
• Persists choices in localStorage and cookie (365 days)
• Respects Do Not Track browser setting automatically
• Links to privacy and cookie policies
• Accept All / Reject All / Customize options

Variants

[ [0x00] DEFAULT BANNER ]

[0x09] COOKIE_POLICY

> We use cookies for analytics. Privacy

1<CookieConsent />

[ [0x00] WITH CALLBACKS ]

[0x09] COOKIE_POLICY

> We use cookies for analytics. Privacy

1<CookieConsent
2  onAccept={(prefs) => saveCookiePreferences(prefs)}
3  onReject={() => clearNonEssentialCookies()}
4  privacyPolicyUrl="/privacy"
5  cookiePolicyUrl="/cookies"
6/>

API Reference

[ [0x00] API REFERENCE ]

Prop	Type	Default	Description
onAccept	`(preferences: CookiePreferences) => void`	-	Called when user accepts cookies with their preferences.
onReject	`() => void`	-	Called when user rejects all non-essential cookies.
privacyPolicyUrl	`string`	`"/privacy"`	URL to privacy policy page.
cookiePolicyUrl	`string`	`"/cookies"`	URL to cookie policy page.
className	`string`	-	Additional CSS classes.