# Consent Manager
Cookie and tracking consent banner for Next.js, built on c15t.
## Features
* Built on top of [c15t](https://c15t.com/docs/frameworks/next/quickstart).
* Theme customized to match [shadcn/ui](https://ui.shadcn.com/docs/theming).
* Designed for Next.js, adaptable to other frameworks via [c15t docs](https://c15t.com).
## Installation
```bash
npx shadcn@latest add @ncdai/consent-manager
```
Install the following dependencies
```bash
npm install clsx tailwind-merge @c15t/nextjs
```
Add a cn helper
```ts title="lib/utils.ts"
import type { ClassValue } from "clsx"
import { clsx } from "clsx"
import { twMerge } from "tailwind-merge"
export const cn = (...inputs: ClassValue[]) => {
return twMerge(clsx(inputs))
}
export function absoluteUrl(path: string) {
return `${process.env.NEXT_PUBLIC_APP_URL}${path}`
}
```
Install the required components
* [Button](https://ui.shadcn.com/docs/components/button)
Copy and paste the following code into your project
```tsx title="components/consent-manager.tsx"
import {
ConsentManagerDialog,
ConsentManagerProvider,
CookieBanner,
} from "@c15t/nextjs"
import { cn } from "@/lib/utils"
import { buttonVariants } from "@/components/ui/button"
export function ConsentManager({ children }: { children: React.ReactNode }) {
return (
{children}
)
}
```
Update the import paths to match your project setup
## Usage
Wrap your app with the `ConsentManager` component:
```tsx title="app/layout.tsx" {1,7}
import { ConsentManager } from "@/components/consent-manager"
export default function Layout({ children }: { children: React.ReactNode }) {
return (
{children}
)
}
```
For customization and advanced usage, see [c15t’s documentation](https://c15t.com/docs/frameworks/next/quickstart).
Last updated on March 1, 2026