CC
2K stars Quality 48 Trend 64

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/backend on 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

Contributing

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

Apache License 2.0


Built by Inth

View this README on GitHub

Recommended Tools

Try a different keyword or remove a filter.

Install

npx skillfish add c15t/c15t