--- title: Cookie Banner description: A customizable cookie consent banner that handles privacy compliance with zero configuration required. lastModified: 2025-08-26 availableIn: - framework: 'next' url: '/docs/frameworks/next/components/cookie-banner' title: 'Next.js' - framework: 'react' url: '/docs/frameworks/react/components/cookie-banner' title: 'React' --- The Cookie Banner component provides an elegant way to obtain and manage consent from your users. It handles all the complexity of privacy regulations while providing a smooth user experience that integrates naturally with your application. {children} ); } `} expectedHeight={300} /> ## Usage The Cookie Banner uses a compound component pattern, giving you complete control over its structure when needed. Think of it like building blocks – you can use the pre-assembled version, or arrange the pieces yourself for custom layouts. ```tsx import { ConsentManagerProvider, CookieBanner } from "@c15t/react"; export default function App() { return ( ); }; ``` ```tsx import { ConsentManagerProvider, CookieBanner } from "@c15t/react"; const CustomCookieBanner = () => { return ( Custom Title Your detailed description here Decline All Accept All Preferences ); }; export default function App() { return ( ); }; ``` ## Styling The Cookie Banner is designed to adapt to your application's visual style. Learn more about our [styling system](/docs/react/styling/overview). ### Theme Variables These keys are available on the theme object to customize your banner. ## Scroll Locking The Cookie Banner supports scroll locking, a technique that prevents users from interacting with your website until they've made a cookie consent choice. ```tsx ``` When enabled, scroll locking: - Prevents page scrolling and interaction - Displays a background overlay - Ensures users must make a privacy choice before accessing content For best results, use scroll locking together with [focus trapping](#focus-trapping) to ensure complete keyboard accessibility. For detailed implementation guides, best practices, and compliance considerations, see our [Scroll Locking Guide](/docs/framework/react/guides/scroll-locking). ## Accessibility The Cookie Banner is built with accessibility in mind: - Proper ARIA roles and labels (role="dialog", aria-modal="true") - Keyboard navigation and interaction support - Focus management and trapping - Screen reader announcements - Semantic HTML structure These features work automatically, ensuring all users can interact with your privacy controls effectively. ### Focus Trapping The Cookie Banner implements focus trapping when it's displayed, which is an essential accessibility feature that prevents keyboard focus from moving outside the banner. This behavior: - **Ensures users complete the consent flow** before interacting with other page elements - **Prevents accidental interaction** with content that shouldn't be accessible yet - **Helps compliance** with accessibility guidelines like WCAG 2.4.3 (Focus Order) Focus trapping is enabled by default and recommended for accessibility compliance. For more details on implementation and best practices, see our [useFocusTrap hook documentation](/docs/hooks/use-focus-trap). ## Best Practices Follow these guidelines for optimal implementation: 1. Place the banner at the root level of your application 2. Keep the title and description clear and concise 3. Use the pre-assembled version unless you need custom layouts 4. Test the banner across different screen sizes 5. Ensure your theme maintains sufficient contrast ratios 6. Consider [scroll locking](#scroll-locking) for strict compliance scenarios 7. Test with keyboard navigation to ensure accessibility ## API Reference ### CookieBanner The main component accepts these props: ### Compound Components