GDPR-compliant cookie consent banner with preferences.

Features

• ✅ Zero dependencies - Pure React implementation
• ✅ Full accessibility - ARIA labels, keyboard navigation, screen reader support
• ✅ Theme support - Light, dark, and auto modes
• ✅ Reduced motion support - Respects user preferences

Props

message

• Type: string - Default: 'We use cookies to enhance your experience...'
• Banner message

policyUrl

• Type: string
• Privacy policy URL

policyText

• Type: string - Default: 'Privacy Policy'
• Privacy policy link text

acceptText

• Type: string - Default: 'Accept All'
• Accept button text

rejectText

• Type: string - Default: 'Reject All'
• Reject button text

customizeText

• Type: string - Default: 'Customize'
• Customize button text

showPreferences

• Type: boolean - Default: true
• Show preferences

position

• Type: 'top' | 'bottom' - Default: 'bottom'
• Position

theme

• Type: 'light' | 'dark' | 'auto' - Default: 'auto'
• Theme mode

radius

• Type: number - Default: 8
• Border radius in pixels

className

• Type: string
• Additional CSS class

onConsent

• Type: (preferences: CookiePreferences) => void
• Consent handler

Customization

CSS Variables

Override these variables in your Webflow custom code or CSS:

--cc-radius: 8px; /* Border radius */

Webflow Classes

Target these classes in Webflow Designer for custom styles:

• .cc-cookie-consent
• .cc-cookie-consent__actions
• .cc-cookie-consent__button
• .cc-cookie-consent__checkbox
• .cc-cookie-consent__container
• .cc-cookie-consent__content
• .cc-cookie-consent__link
• .cc-cookie-consent__message
• .cc-cookie-consent__preference
• .cc-cookie-consent__preference-desc
• .cc-cookie-consent__preference-info
• .cc-cookie-consent__preference-list
• .cc-cookie-consent__preference-name
• .cc-cookie-consent__preferences
• .cc-cookie-consent__title
• .cc-cookie-consent__toggle
• .cc-cookie-consent__toggle-slider