Cookie Banner

The Cookie Banner component provides an elegant way to obtain and manage cookie consent from your users. It handles all the complexity of privacy regulations while providing a smooth user experience that integrates naturally with your application.

Understanding Cookie Consent

Before diving into implementation, let's understand what makes a cookie banner effective. A good cookie banner needs to:

• Inform users about data collection clearly and concisely
• Obtain explicit consent before setting non-essential cookies
• Provide easy ways to accept, reject, or customize preferences
• Remember user choices across sessions
• Meet legal requirements across different jurisdictions

Our Cookie Banner component handles all of these requirements automatically, while remaining fully customizable to match your application's design.

Quick Start

Let's add a basic cookie banner to your application. First, install the package:

npm install @c15t/react

Then add the banner to your root component:

import {
	ConsentManagerProvider,
	CookieBanner,
} from "@c15t/react";
 
function App() {
  return (
    <ConsentManagerProvider>
      <YourApp />
      <CookieBanner />
    </ConsentManagerProvider>
  );
}

That's it! The banner will automatically:

• Appear on first visit
• Remember user choices
• Handle consent management
• Stay compliant with privacy laws

Component Architecture

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.

import { CookieBanner } from "@c15t/react";
 
const Banner = () => {
  return (
  	<CookieBanner
  		title="We value your privacy"
  		description="We use cookies to enhance your experience"
  	/>
  );
};

Customization

The Cookie Banner is designed to adapt to your application's visual style. Here are the main ways to customize its appearance:

Using Themes

Here are the available theme variables:

The theme prop provides a straightforward way to customize the banner's appearance:

import { CookieBanner } from "@c15t/react";
 
const CustomCookieBanner = () => {
  return (
    <CookieBanner
      theme={{
        "banner.root": "",
        "banner.title": "",
        "banner.description": "",
        "banner.footer": "",
        "banner.root": "",
        "banner.card": "",
        "banner.header.root": "",
        "banner.header.title": "",
        "banner.header.description": "",
        "banner.footer": "",
        "banner.footer.sub-group": "",
        "banner.overlay": "",
        "banner.footer.reject-button": "",
        "banner.footer.customize-button": "",
        "banner.footer.accept-button": "",
      }}
    />
  );
};

Using CSS Modules

For more traditional styling approaches, you can use CSS modules:

import { CookieBanner } from "@c15t/react";
import styles from "./cookie-banner.module.css";
 
const CSSModuleCookieBanner = () => {
  return (
    <CookieBanner
      theme={{
        "banner.root": styles.banner,
        "banner.title": styles.title,
        "banner.description": styles.description,
      }}
    />
  );
};

Using Existing Components

You can integrate your own component library using the asChild prop:

import * as CookieBanner from "@c15t/react/cookie-banner";
import { Button } from "./your-components";
 
const CustomAcceptButton = () => {
  return (
    <CookieBanner.AcceptButton asChild>
      <Button variant="primary">Accept All Cookies</Button>
    </CookieBanner.AcceptButton>
  );
};

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.

<CookieBanner 
  lockScroll={true}
/>

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 to ensure complete keyboard accessibility.

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)

Implementation Details

Focus trapping in the Cookie Banner works through the CookieBannerCard component, which:

1. Uses the useFocusTrap hook internally
2. Automatically sets tabIndex={0} on the container
3. Applies proper ARIA attributes (role="dialog" and aria-modal="true")
4. Remembers the previously focused element and restores it when closed
5. Cycles focus between interactive elements when Tab is pressed

You can control focus trapping with the trapFocus prop:

// Default behavior (recommended)
<CookieBanner trapFocus={true} />
 
// Disable focus trapping (use with caution)
<CookieBanner trapFocus={false} />

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 for strict compliance scenarios
7. Test with keyboard navigation to ensure accessibility

Common Pitfalls

API Reference

CookieBanner

The main component accepts these props:

Compound Components

Each compound component is designed for specific functionality:

Related Components