Open-source cookie consent manager and GDPR cookie banner for React, Next.js, Vue and JavaScript. Google Consent Mode v2 and IAB TCF.
Overview
c15t is the open standard for cookie banners. It's an open-source cookie consent manager and consent management platform (CMP) for JavaScript. You get a GDPR cookie banner, a preference dialog, and consent-gated scripts for React, Next.js, Vue, Nuxt, Svelte, Astro, TanStack Start, and plain HTML. Google Consent Mode v2 works through @c15t/integrations, and IAB TCF through an optional add-on. c15t is used by 2,100+ sites, including expo.dev, zed.dev, unkey.dev, mintlify.com, and sazabi.com. - The banner ships in your bundle and renders with your app, not from a third-party snippet that loads after your page. - Ready-made loaders cover 40+ vendors, such as Google Tag Manager, GA4, Meta Pixel, and PostHog. - Policies decide who sees a banner: opt-in for visitors in the EU, opt-out for some US states, or rules that you write. - Next.js, Nuxt, Astro, TanStack Start, and SvelteKit resolve each visitor's policy on the server, so the banner does not wait for a request from the browser.
README
c15t is the open standard for cookie banners. It’s an open-source cookie consent manager and consent management platform (CMP) for JavaScript. You get a GDPR cookie banner, a preference dialog, and consent-gated scripts for React, Next.js, Vue, Nuxt, Svelte, Astro, TanStack Start, and plain HTML. Google Consent Mode v2 works through @c15t/integrations, and IAB TCF through an optional add-on.
c15t is used by 2,100+ sites, including expo.dev, zed.dev, unkey.dev, mintlify.com, and sazabi.com.
Docs · Hosted on Inth · Discord
Why c15t
- Consent lives in your code. The banner ships in your bundle and renders with your app, not from a third-party snippet that loads after your page.
- Analytics, ads, and pixels follow each visitor’s choice. Ready-made loaders cover 40+ vendors, such as Google Tag Manager, GA4, Meta Pixel, and PostHog.
- One setup for every region. Policies decide who sees a banner: opt-in for visitors in the EU, opt-out for some US states, or rules that you write.
- Server-rendered pages can ship the banner in the first HTML. Next.js, Nuxt, Astro, TanStack Start, and SvelteKit resolve each visitor’s policy on the server, so the banner does not wait for a request from the browser.
- Standards built in: Google Consent Mode v2, IAB TCF 2.4, IAB GPP, and Global Privacy Control.
- Your design or ours. Use the prebuilt components with a theme system, or build your own UI on headless hooks and composables.
- Your data where you want it. Keep consent records on Inth, on a backend you run, or in the browser only.
Supported Frameworks
| Framework | Install | Import from | Quickstart |
|---|---|---|---|
| React 18 and 19 (Vite, React Router) | c15t |
c15t/react |
React |
| Next.js 15 and 16 (App Router, Pages Router) | c15t |
c15t/next |
Next.js |
| Vue 3 | c15t |
c15t/vue/vue-plugin |
Vue |
| Nuxt 3 and 4 | c15t |
c15t/vue (Nuxt module) |
Nuxt |
| Astro 5, 6, and 7 | c15t |
c15t/astro |
Astro |
| TanStack Start | c15t |
c15t/tanstack-start |
TanStack Start |
| Svelte 5 and SvelteKit | @c15t/svelte |
@c15t/svelte |
Svelte, SvelteKit |
| JavaScript, headless | c15t |
c15t, c15t/runtime |
Headless runtime |
| Script tag, no build step (Webflow, WordPress, Framer, Squarespace) | @c15t/browser |
`` from a CDN | HTML |
Hosting
c15t needs somewhere to keep policies and consent records. Pick one:
- Hosted on Inth: Inth runs the backend for you. You get policy storage, consent records, audit history, and a dashboard, with no database or server to run. Sign-up is free.
- Self-hosted: Run
@c15t/backendon your own server with PostgreSQL, MySQL, or SQLite. You own migrations, backups, and uptime. See the self-hosting guide. - Offline: Choices stay in the browser, with no consent records. Use it for local development, previews, and demos, not production.
The frontend code is the same for Inth and a self-hosted backend. Only the backend URL changes.
Example
A Next.js App Router app with the prebuilt banner, the preference dialog, and PostHog held until the visitor allows measurement. Install c15t and the vendor loaders:
pnpm add c15t @c15t/integrations
Set NEXT_PUBLIC_C15T_BACKEND_URL to your Inth backend URL in .env.local, then add three files:
// next.config.ts
import { withConsentManifest } from 'c15t/next/build'
import type { NextConfig } from 'next'
const nextConfig = {} satisfies NextConfig
// Downloads your policy at build time and finds c15t.config.ts
export default withConsentManifest(nextConfig)
// c15t.config.ts
import { posthog } from '@c15t/integrations/posthog'
import { defineConsentConfig } from 'c15t/next'
export default defineConsentConfig({
scripts: [
posthog({
id: 'phc_your_project_key',
initOptions: { cookieless_mode: 'never' },
loadMode: 'after-consent',
}),
],
})
// app/layout.tsx
import {
ConsentBanner,
ConsentDialog,
ConsentDialogLink,
ConsentRoot,
} from 'c15t/next'
import { resolveConsent } from 'c15t/next/server'
import type { ReactNode } from 'react'
import './globals.css'
const RootLayout = ({ children }: { children: ReactNode }) => (
{/* Not awaited: the page renders while consent resolves. */}
{children}
)
export default RootLayout
The layout stays a Server Component. You write no 'use client' wrapper and need no c15t stylesheet import. The Next.js quickstart walks through each file. The quickstart for each other framework has the same example.
Integrations
@c15t/integrations has a loader for each vendor below. Most wait until the visitor allows the vendor’s consent category. A few, such as Google Tag Manager and Mixpanel, load at once and pass the choice to the vendor’s own consent API. The integrations overview shows what each loader does.
- Tag managers: Google Tag Manager, Cloudflare Zaraz
- Analytics: Google tag (GA4 and Google Ads), Adobe Analytics, Ahrefs Analytics, Amplitude, Cloudflare Web Analytics, Databuddy, Fathom, Heap, Hightouch, Hotjar, LogRocket, Matomo, Microsoft Clarity, Mixpanel, OneDollarStats, Pirsch, Plausible, PostHog, Promptwatch, RudderStack, Rybbit, Segment, Umami, Vercel Analytics, Vercel Speed Insights
- Ads and pixels: Meta Pixel, OpenAI Pixel, TikTok Pixel, LinkedIn Insight Tag, Microsoft UET, Pinterest Tag, Reddit Pixel, Snapchat Pixel, X Pixel
- Enrichment, email, and SMS: Clearbit, Klaviyo
- Chat and support: Intercom, Crisp, Front Chat
- Monitoring: Sentry
- Embeds: YouTube and Google Maps, with no extra package
Packages
| Package | Use it for | Version |
|---|---|---|
c15t |
The package most apps install. The consent engine plus the React, Next.js, Vue, Nuxt, Astro, and TanStack Start adapters | |
@c15t/core |
Headless consent engine: policies, storage, and script gating. Also in c15t |
|
@c15t/react |
React 18 and 19 components and hooks. Also at c15t/react |
|
@c15t/nextjs |
Next.js 15 and 16, App Router and Pages Router, with server rendering. Also at c15t/next |
|
@c15t/vue |
Vue 3 plugin and Nuxt 3 and 4 module. Also at c15t/vue |
|
@c15t/astro |
Astro 5, 6, and 7, with a banner that ships no framework JavaScript. Also at c15t/astro |
|
@c15t/tanstack-start |
TanStack Start, with the banner in the first HTML. Also at c15t/tanstack-start |
|
@c15t/svelte |
Svelte 5 and SvelteKit. A separate install | |
@c15t/browser |
One script tag for Webflow, WordPress, Framer, Squarespace, and plain HTML | |
@c15t/integrations |
Consent-aware loaders for 40+ analytics, ad, chat, and monitoring vendors | |
@c15t/iab |
IAB TCF 2.4 and GPP for programmatic advertising | |
@c15t/translations |
Banner and dialog text in 35 languages | |
@c15t/ui |
The primitives, CSS, and theme tokens behind the c15t components | |
@c15t/backend |
The self-hosted consent backend, for PostgreSQL, MySQL, or SQLite | |
@c15t/node-sdk |
Read and write consent records from your server | |
@c15t/cli |
Set up c15t, run backend migrations, run codemods, and install agent skills | |
@c15t/dev-tools |
Inspect consent state while you develop | |
@c15t/schema |
Valibot schemas and TypeScript types for the consent API | |
@c15t/logger |
The structured logger that c15t packages use |
@c15t/scripts is deprecated. It re-exports @c15t/integrations for older imports and goes away in v4.
Docs for AI Agents
Every package that has docs ships them as Markdown, matched to the installed version. After you install c15t, point your coding agent at node_modules/c15t/AGENTS.md.
On the web, every page of the c15t docs has a Markdown version, and llms.txt lists them all. Install the c15t agent skills with npx skills add c15t/skills.
Talk
Watch the Next.js Conf 2025 talk: Why Your Consent Banner Should Be in Your Bundle.
Develop c15t
This repo uses Bun and Turborepo. AGENTS.md has the full command list.
bun install
bun run dev # the demo app in apps/playground
bun run build # every package
bun run test # packages affected by your changes
Support
- Join our Discord community
- Open an issue on our GitHub repository
- Visit inth.com and use the chat widget
- Email our support team at [email protected]
Contributing
- Read the contribution guidelines before you open a pull request
- Follow the code of conduct
Security
Do not open a public issue for a security vulnerability. Report it privately through GitHub’s vulnerability reporting. We examine every valid report.
- Do not share the vulnerability in public forums, issues, or pull requests
- Give the steps to reproduce it and the versions it affects
- Give us time to release a fix before you disclose it
License
Built by Inth
Recommended Tools
Try a different keyword or remove a filter.
Install
npx skillfish add c15t/c15t