---
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.

<ResponsivePreview
  src="https://c15t-examples.vercel.app/react/simple-cookie-banner"
  code={`
export function SimpleCookieBanner({ children }: { children?: ReactNode }) {
return (
<ConsentManagerProvider
options={{
mode: 'offline',
consentCategories: ['experience', 'marketing', 'functionality', 'necessary'],
}}
>
<CookieBanner />
{children}
</ConsentManagerProvider>
);
}
`}
  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.

**Recommended**

```tsx
import { ConsentManagerProvider, CookieBanner } from "@c15t/react";

export default function App() {
  return (
    <ConsentManagerProvider options={{
      mode: 'c15t',
      backendURL: 'https://your-instance.c15t.dev',
      consentCategories: ['necessary', 'marketing'],
    }}>
      <CookieBanner /> 
    </ConsentManagerProvider>
  );
};

```

**expanded**

```tsx
import { ConsentManagerProvider, CookieBanner } from "@c15t/react";

const CustomCookieBanner = () => {
	return (
    <CookieBanner.Root>
      <CookieBanner.Card>
        <CookieBanner.Header>
          <CookieBanner.Title>Custom Title</CookieBanner.Title>
          <CookieBanner.Description>
            Your detailed description here
          </CookieBanner.Description>
        </CookieBanner.Header>
        <CookieBanner.Footer>
          <CookieBanner.FooterSubGroup>
            <CookieBanner.RejectButton themeKey="banner.footer.customize-button">
              Decline All
            </CookieBanner.RejectButton>
            <CookieBanner.AcceptButton themeKey="banner.footer.customize-button">
              Accept All
            </CookieBanner.AcceptButton>
          </CookieBanner.FooterSubGroup>
          <CookieBanner.CustomizeButton themeKey="banner.footer.customize-button">
            Preferences
          </CookieBanner.CustomizeButton>
        </CookieBanner.Footer>
      </CookieBanner.Card>
    </CookieBanner.Root>
	);
};


export default function App() {
  return (
    <ConsentManagerProvider options={{
      mode: 'c15t',
      backendURL: 'https://your-instance.c15t.dev',
      consentCategories: ['necessary', 'marketing'],
    }}>
      <CustomCookieBanner /> 
    </ConsentManagerProvider>
  );
};
```

## Legal Links

You can display legal links (like Privacy Policy or Cookie Policy) inline with the banner description. Legal links are rendered inline with the description text, styled as links with commas separating multiple links.

### Setting Up Legal Links

First, configure your legal links in the `ConsentManagerProvider`:

```tsx
<ConsentManagerProvider
  options={{
    legalLinks: {
      privacyPolicy: {
        href: '/privacy',
        label: 'Privacy Policy',
      },
      cookiePolicy: {
        href: '/cookies',
        label: 'Cookie Policy',
      },
      termsOfService: {
        href: '/terms',
        label: 'Terms of Service',
      },
    },
  }}
>
  <CookieBanner />
</ConsentManagerProvider>
```

### Displaying Legal Links

By default, the Cookie Banner shows no legal links. To display them, pass the `legalLinks` prop with an array of the link keys you want to show:

```tsx
// Show no legal links (default)
<CookieBanner />

// Show privacy policy and cookie policy
<CookieBanner legalLinks={['privacyPolicy', 'cookiePolicy']} />

// Show only terms of service
<CookieBanner legalLinks={['termsOfService']} />
```

Legal links appear inline with the description text. For example, if your description is "We use cookies to enhance your experience", it will render as: "We use cookies to enhance your experience Privacy Policy, Cookie Policy" where the links are styled in blue and underlined on hover.

## Styling

The Cookie Banner is designed to adapt to your application's visual style. Learn more about our [styling system](/docs/frameworks/react/styling/overview).

### Theme Variables

These keys are available on the theme object to customize your banner.

| Property          | Type                                                                                                                                                                                                   | Description                      | Default |  Required  |
| :---------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------- | :------ | :--------: |
| CookieBannerTheme | Partial\<\{ 'banner.root': ThemeValue\<RootCSSVariables>; 'banner.card': ThemeValue\<CardCSSVariables>; 'banner.header.root': ThemeValue\<...>; ... 9 more ...; 'banner.overlay': ThemeValue\<...>; }> | Type alias for CookieBannerTheme | -       | ✅ Required |

## 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
<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](#focus-trapping) to ensure complete keyboard accessibility.

> ℹ️ **Info:**
> For detailed implementation guides, best practices, and compliance considerations, see our Scroll Locking Guide.

## 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)

> ℹ️ **Info:**
> Focus trapping is enabled by default and recommended for accessibility compliance. For more details on implementation and best practices, see our useFocusTrap hook documentation.

## 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:

| Property            | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | Description                                                                                                                                                                                                           | Default   | Required |
| :------------------ | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :-------- | :------: |
| theme               | Partial\<\{ 'banner.root': ThemeValue\<RootCSSVariables>; 'banner.card': ThemeValue\<CardCSSVariables>; 'banner.header.root': ThemeValue\<HeaderCSSVariables>; 'banner.header.title': ThemeValue\<TitleCSSVariables>; 'banner.header.description': ThemeValue\<DescriptionCSSVariables>; 'banner.header.legal-links': ThemeValue\<LegalLinksCSSVariables>; 'banner.header.legal-links.link': ThemeValue; 'banner.footer': ThemeValue\<FooterCSSVariables>; 'banner.footer.sub-group': ThemeValue; 'banner.footer.reject-button': ThemeValue\<ButtonCSSVariables>; 'banner.footer.customize-button': ThemeValue\<ButtonCSSVariables>; 'banner.footer.accept-button': ThemeValue\<ButtonCSSVariables>; 'banner.overlay': ThemeValue\<OverlayCSSVariables>; }> \| undefined | Custom styles to apply to the banner and its child components                                                                                                                                                         | undefined | Optional |
| noStyle             | boolean \| undefined                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | When true, removes all default styling from the component                                                                                                                                                             | false     | Optional |
| title               | ReactNode                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | Content to display as the banner's title                                                                                                                                                                              | undefined | Optional |
| description         | ReactNode                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | Content to display as the banner's description                                                                                                                                                                        | undefined | Optional |
| rejectButtonText    | ReactNode                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | Content to display on the reject button                                                                                                                                                                               | undefined | Optional |
| customizeButtonText | ReactNode                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | Content to display on the customize button                                                                                                                                                                            | undefined | Optional |
| acceptButtonText    | ReactNode                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | Content to display on the accept button                                                                                                                                                                               | undefined | Optional |
| scrollLock          | boolean \| undefined                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | When true, the cookie banner will lock the scroll of the page                                                                                                                                                         | false     | Optional |
| trapFocus           | boolean \| undefined                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | When true, the cookie banner will trap focus                                                                                                                                                                          | true      | Optional |
| disableAnimation    | boolean \| undefined                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | When true, disables the entrance/exit animations                                                                                                                                                                      | false     | Optional |
| legalLinks          | any                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | Controls which legal links to display.&#xA;&#xA;- \`undefined\` (default): Shows all available legal links&#xA;- \`null\`: Explicitly hides all legal links&#xA;- Array of keys: Shows only the specified legal links | -         | Optional |

### Compound Components

| Property        | Type                                                                                                                                                               | Description | Default |  Required  |
| :-------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------- | :------ | :--------: |
| Root            | FC\<CookieBannerRootProps>                                                                                                                                         |             | -       | ✅ Required |
| Card            | ForwardRefExoticComponent\<Omit\<BoxProps, "themeKey"> & RefAttributes\<HTMLDivElement>>                                                                           |             | -       | ✅ Required |
| Header          | ForwardRefExoticComponent\<Omit\<BoxProps, "themeKey"> & RefAttributes\<HTMLDivElement>>                                                                           |             | -       | ✅ Required |
| Title           | ForwardRefExoticComponent\<Omit\<BoxProps, "themeKey"> & RefAttributes\<HTMLDivElement>>                                                                           |             | -       | ✅ Required |
| Description     | ForwardRefExoticComponent\<Omit\<BoxProps, "themeKey"> & \{ legalLinks?: (string \| number \| symbol)\[] \| null \| undefined; } & RefAttributes\<HTMLDivElement>> |             | -       | ✅ Required |
| Footer          | ForwardRefExoticComponent\<Omit\<BoxProps, "themeKey"> & RefAttributes\<HTMLDivElement>>                                                                           |             | -       | ✅ Required |
| FooterSubGroup  | ForwardRefExoticComponent\<Omit\<BoxProps, "themeKey"> & RefAttributes\<HTMLDivElement>>                                                                           |             | -       | ✅ Required |
| RejectButton    | ForwardRefExoticComponent\<ConsentButtonProps & RefAttributes\<HTMLButtonElement>>                                                                                 |             | -       | ✅ Required |
| CustomizeButton | ForwardRefExoticComponent\<ConsentButtonProps & RefAttributes\<HTMLButtonElement>>                                                                                 |             | -       | ✅ Required |
| AcceptButton    | ForwardRefExoticComponent\<ConsentButtonProps & RefAttributes\<HTMLButtonElement>>                                                                                 |             | -       | ✅ Required |
| Overlay         | ForwardRefExoticComponent\<OverlayProps & RefAttributes\<HTMLDivElement>>                                                                                          |             | -       | ✅ Required |