Quickstart

Via CLI

npx @c15t/cli@rc

Manual Installation

Install package

npm install @c15t/react

Create `ConsentManager` components

Create a provider component with the consent UI and a wrapper that re-exports it. This initializes the consent store and makes consent state available to all child components.

'use client';

import { type ReactNode } from 'react';
import {
  ConsentManagerProvider,
  ConsentBanner,
  ConsentDialog,
} from '@c15t/react';

export default function ConsentManagerClient({
  children,
}: {
  children: ReactNode;
}) {
  return (
    <ConsentManagerProvider
      options={{
        mode: 'c15t',
        backendURL: 'https://your-instance.c15t.dev',
        consentCategories: ['necessary', 'measurement', 'marketing'],
        // Shows banner during development. Remove for production.
        overrides: { country: 'DE' },
      }}
    >
      <ConsentBanner />
      <ConsentDialog />
      {children}
    </ConsentManagerProvider>
  );
}

import type { ReactNode } from 'react';
import ConsentManagerProvider from './provider';

export function ConsentManager({ children }: { children: ReactNode }) {
  return <ConsentManagerProvider>{children}</ConsentManagerProvider>;
}

Info

Don't have a backend yet? Use mode: 'offline' to get started with local-only consent storage. See Client Modes for details.

Mount `ConsentManager` at the app root

Wrap your existing app tree with ConsentManager so all routes/components can access consent state.

import { ConsentManager } from './components/consent-manager';

export default function App() {
  return <ConsentManager>{/* your existing app */}</ConsentManager>;
}

Verify it works

Start your development server and confirm:

A consent banner appears at the bottom of the page
Clicking "Customize" opens a dialog with toggles for each consent category
After accepting or rejecting, the banner dismisses and your choice persists across page reloads

Optional: Add DevTools

Install DevTools only if you want a runtime inspector while building and debugging:

npm install @c15t/dev-tools

Then add it inside your existing provider:

import { DevTools } from '@c15t/dev-tools/react';

// ...

<ConsentManagerProvider options={...}>
  <ConsentBanner />
  <ConsentDialog />
  {process.env.NODE_ENV !== 'production' && <DevTools />}
  {children}
</ConsentManagerProvider>

Info

Want to understand what's happening under the hood? See Initialization Flow for the lifecycle and Cookie Management for script/cookie behavior and revocation handling.