---
title: Quickstart
description: Add consent management to your React app in under 5 minutes.
variants:
  - value: javascript
    href: /docs/frameworks/javascript/quickstart
    label: JavaScript
  - value: react
    href: /docs/frameworks/react/quickstart
    label: React
  - value: next
    href: /docs/frameworks/next/quickstart
    label: Next.js
group: frameworks
lastModified: "2026-06-19T14:11:31+01:00"
lastAuthor: Kaylee
---
## Via CLI

<PackageCommandTabs command="@c15t/cli" />

## Manual Installation

1. **Install package**

2. **Import styles** Import the prebuilt component stylesheet in your app-level CSS entrypoint. This is required for styled components to render correctly.

   ```css
   @import "@c15t/react/styles.css";
   ```

   Keeping the c15t stylesheet in your global CSS entrypoint makes layer and cascade order explicit. JS/TSX side-effect imports can load in a different order across framework and Tailwind tooling, which makes style regressions harder to debug.With Tailwind v4, keep c15t at the end of the top-level @import block so Fumadocs, tw-animate-css, and other preset imports do not override c15t theme tokens.

   > ℹ️ Info:
   > If you are using the headless API or fully custom styling, you can skip this import. src/main.tsx should keep importing ./index.css as usual.

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

   ```tsx
   '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: 'hosted',
           backendURL: 'https://your-instance.c15t.dev',
           consentCategories: ['necessary', 'measurement', 'marketing'],
           // Shows banner during development. Remove for production.
           overrides: { country: 'DE' },
         }}
       >
         <ConsentBanner />
         <ConsentDialog />
         {children}
       </ConsentManagerProvider>
     );
   }
   ```

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

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

   > ℹ️ Info:
   > Hosted mode is the recommended production setup because the backend resolves jurisdiction and policy, keeps durable consent records, and lets c15t recover from temporary network failures by re-syncing later.
   >
   > ⚠️ Warning:
   > Don't have a backend yet? You can use mode: 'offline' for local-only consent storage, but it gives up backend audit history, server-side consent awareness, and automatic jurisdiction detection. Review the browser-only storage consequences before choosing it for production.

4. **Mount ConsentManager at the app root** Wrap your existing app tree with `ConsentManager` so all routes/components can access consent state.

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

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

5. **Verify it works** Start your development server and confirm:

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

> ℹ️ **Info:**
> Want to improve startup performance? See Optimization for the decision guide, prefetch setup, and network tuning.

## Optional: Add DevTools

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

<PackageCommandTabs mode="install" command="@c15t/dev-tools" />

Then add it inside your existing provider:

```tsx title="components/consent-manager/provider.tsx"
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.

## Optional: AI Agents

Install c15t agent skills to let AI agents help with styling, i18n, scripts & other configuration.

<PackageCommandTabs command="@c15t/cli skills" />

See [AI Agents](/docs/ai-agents) for bundled package docs and agent skills.

## Next steps

* [Optimization](/docs/frameworks/react/optimization)
* [Script Loader](/docs/frameworks/react/script-loader)
* [Styling](/docs/frameworks/react/styling/overview)
* [Consent Categories](/docs/frameworks/react/concepts/consent-categories)
* [Components](/docs/frameworks/react/components/consent-banner)
* [AI Agents](/docs/ai-agents)