---
title: Quickstart
description: Add consent management to your Next.js app in under 5 minutes.
lastModified: 2026-03-11
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/nextjs` |
| pnpm | `pnpm add @c15t/nextjs` |
| yarn | `yarn add @c15t/nextjs` |
| bun | `bun add @c15t/nextjs` |
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/nextjs/styles.css";
```
> ℹ️ Info:
>
> If you are using the headless API or fully custom styling, you can skip this import. Your root layout should continue importing ./globals.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/nextjs';
export default function ConsentManagerClient({ children }: { children: ReactNode }) {
return (
{children}
);
}
```
```tsx
import type { ReactNode } from 'react';
import ConsentManagerProvider from './provider';
export function ConsentManager({ children }: { children: ReactNode }) {
return {children};
}
```
> ℹ️ 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 app tree with ConsentManager so all routes/components can access consent state.
```tsx
import { ConsentManager } from '@/components/consent-manager';
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
{children}
);
}
```
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 better performance and static-route support? See Optimization for rewrites, prefetching, and network tuning. If you want server-side data prefetching, see Server-Side Data Fetching.
## 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';
// ...
{process.env.NODE_ENV !== 'production' && }
{children}
```
> ℹ️ **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