---
title: Quickstart
description: Add consent management to your React app in under 5 minutes.
lastModified: 2026-02-10
availableIn:
  - framework: 'javascript'
    url: '/docs/frameworks/javascript/quickstart'
    title: 'JavaScript'
  - framework: 'react'
    url: '/docs/frameworks/react/quickstart'
    title: 'React'
  - framework: 'next'
    url: '/docs/frameworks/next/quickstart'
    title: 'Next.js'
---
## Via CLI

|Package manager|Command|
|:--|:--|
|npm|`npx @c15t/cli`|
|pnpm|`pnpm dlx @c15t/cli`|
|yarn|`yarn dlx @c15t/cli`|
|bun|`bunx @c15t/cli`|

## Manual Installation

1. **Install package**

   |Package manager|Command|
   |:--|:--|
   |npm|`npm install @c15t/react`|
   |pnpm|`pnpm add @c15t/react`|
   |yarn|`yarn add @c15t/react`|
   |bun|`bun add @c15t/react`|

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.

   > ℹ️ 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.
   >
   > ℹ️ Info:
   >
   > 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:

   A consent banner appears at the bottom of the pageClicking "Customize" opens a dialog with toggles for each consent categoryAfter 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:

|Package manager|Command|
|:--|:--|
|npm|`npm install @c15t/dev-tools`|
|pnpm|`pnpm add @c15t/dev-tools`|
|yarn|`yarn add @c15t/dev-tools`|
|bun|`bun add @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.

|Package manager|Command|
|:--|:--|
|npm|`npx @c15t/cli skills`|
|pnpm|`pnpm dlx @c15t/cli skills`|
|yarn|`yarn dlx @c15t/cli skills`|
|bun|`bunx @c15t/cli skills`|

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

## Next steps