import { ConsentManagerProvider, ConsentBanner, ConsentDialog, } from "@c15t/nextjs"; import { metaPixel } from "@c15t/scripts/meta-pixel"; export default function App() { return ( <ConsentManagerProvider options={{ mode: 'hosted', backendURL: process.env.NEXT_PUBLIC_C15T_URL, scripts: [ metaPixel({ pixelId: '123456789012345' }), ], }}> {children} <ConsentBanner /> <ConsentDialog /> </ConsentManagerProvider> ); }

Why c15t?

c15t runs entirely in your frontend or edge stack, blocking requests and managing consent states with minimal overhead. Use our CLI to scaffold a cookie banner in seconds, or drop in the headless logic and fully control the experience yourself.

Performance First

Faster than your Lighthouse score can blink. Minimal bundle size, fully tree-shakable. Built for speed, not bloat.

0ms236ms473ms709ms

c15t

89ms

Usercentrics

445ms

OneTrust

514ms

Ketch

709ms

Style With your own CSS

Bring your design tokens, themes, or unhinged CSS experiments. You're in control, we don't fight your stack.

<ConsentManagerProvider options={{
    theme: {
      colors: {
        primary: '#14b8a6',
      },
    },
  }}
/>

We value your privacy

This site uses cookies to improve your browsing experience, analyze site traffic, and show personalized content.

i18n Support

Translate once, consent everywhere. Built-in locale handling so your banner speaks your user's language literally.

English

We value your privacy

This site uses cookies to improve your browsing experience, analyze site traffic, and show personalized content.

Geo Location

Know where your users are. Serve the end banner in the end language with the end legal config or even don't show it at all! Magically compliant.

15+ privacy-law jurisdictions

GDPRCCPA / CPRALGPDPIPEDAPIPLAPPI

Framework Compatible

c15t core is headless and works with any framework: React, Vue, Svelte, Angular, Next.js, Nuxt, SvelteKit, Astro, Solid, Qwik, and more.

React

A JavaScript library for building user interfaces

Vue

The Progressive JavaScript Framework

Svelte

Cybernetically enhanced web apps

React

A JavaScript library for building user interfaces

Vue

The Progressive JavaScript Framework

Svelte

Cybernetically enhanced web apps

React

A JavaScript library for building user interfaces

Vue

The Progressive JavaScript Framework

Svelte

Cybernetically enhanced web apps

React

A JavaScript library for building user interfaces

Vue

The Progressive JavaScript Framework

Svelte

Cybernetically enhanced web apps

Angular

The modern web developer's platform

Next.js

The React Framework for the Web

Astro

The all-in-one web framework

Angular

The modern web developer's platform

Next.js

The React Framework for the Web

Astro

The all-in-one web framework

Angular

The modern web developer's platform

Next.js

The React Framework for the Web

Astro

The all-in-one web framework

Angular

The modern web developer's platform

Next.js

The React Framework for the Web

Astro

The all-in-one web framework

What can you build with c15t?

c15t is an open-source consent-management toolkit for teams that want privacy controls to live in their application code. Start with a framework quickstart, then choose the components, storage mode, policy, and resource controls that fit your product.

Build the consent experience your product needs

Use ready-made consent banners, dialogs, and settings controls when you want a fast implementation, or use the headless APIs when the interface must match an existing design system. c15t keeps consent state and presentation separate, so teams can change copy, layout, categories, and interaction patterns without replacing the underlying consent model. The same primitives support a small marketing site, a product dashboard, or a component library shared across several applications.

Explore headless components

Control scripts and requests before they run

Consent is useful only when it changes what the browser is allowed to load. c15t can hold analytics, advertising, embeds, iframes, and other optional resources until the matching category is permitted. Use the script loader for known integrations, the iframe and network blockers for resources outside your component tree, and callbacks when your application needs to react to a consent change. This gives developers one place to connect the consent decision to real browser behavior.

Review script loading

Choose hosted, self-hosted, or offline operation

Projects can start with a hosted backend, run the consent service in their own infrastructure, or use offline mode when consent should remain entirely in the browser. Client modes let each application choose how records are stored and synchronized without changing the banner API. The CLI provides the setup path for local development and self-hosting, while typed configuration keeps deployment choices visible in code review instead of hiding them in a third-party dashboard.

Compare client modes

Model consent by category and policy

Define the categories your site actually uses, then connect scripts and storage to those categories. Consent models and policy packs help teams express different regional behavior without scattering legal-condition checks through application code. Location information can select the appropriate experience, while necessary functionality remains distinct from optional analytics or marketing. c15t provides implementation tools and defaults; your organization still owns its policy choices and legal review.

Understand consent categories

Serve international products without forking the UI

Internationalization support keeps translated labels, descriptions, and actions in the same consent flow. Teams can provide their own messages and locale selection while reusing one component structure across markets. Direction, responsive layout, keyboard behavior, reduced-motion preferences, and color-scheme styling remain part of the interface rather than separate regional implementations. The result is easier to test because language changes do not create a second consent system.

Set up internationalization

Integrate through framework-native, typed APIs

Use dedicated packages for Next.js and React, or the JavaScript package for other browser stacks. Providers and components cover the common path; hooks, callbacks, and direct APIs expose consent checks and updates when an application needs finer control. The documentation includes quickstarts, API references, styling tokens, server-side guidance, troubleshooting, and migration material. Machine-readable OpenAPI, MCP, llms.txt, and Markdown endpoints give agents the same predictable route into those resources.

Choose a framework guide

A practical c15t implementation path

Start by inventorying the optional resources your site loads. Group analytics, advertising, personalization, embeds, and storage by the purpose users will recognize, then identify the resources that are strictly necessary for the service they requested. This produces a concrete category model before UI work begins and makes it possible to verify that every optional request has an owner. Record the regions, languages, retention choices, and policy decisions that need product or legal approval rather than burying those choices in component props.

Next, install the package for your framework and configure the consent manager near the application root. Connect scripts, iframes, and network requests to their categories before adding the banner, so a missing or delayed interface cannot accidentally load an optional resource. Choose the client mode and backend that fit the deployment, add translated copy, and use the supplied components or headless state to build the visible experience. Keep the settings control reachable after the initial choice so a visitor can inspect or change consent later.

Verify behavior with a fresh browser profile for each policy and locale you support. Before consent, inspect cookies, local storage, DOM-injected scripts, iframe requests, and network traffic; after each choice, confirm that only the matching categories become active. Test rejection, acceptance, granular changes, withdrawal, refreshes, client-side navigation, and returning visits. Repeat the checks with JavaScript delayed, slow network conditions, keyboard navigation, reduced motion, and narrow viewports so the consent control does not depend on one ideal browser state.

Treat categories, policy packs, translations, and resource mappings as versioned product configuration. Review them when a new analytics tool, marketing embed, region, or data use is introduced, and include consent checks in the release path for those changes. c15t exposes the state and loading controls needed for that workflow, while your team decides what must be disclosed and permitted. The public docs, Markdown routes, OpenAPI description, and MCP tools let developers and coding agents look up the current integration surface without relying on marketing copy or guessing at package behavior.

c15t: The Developer-First Consent Banner

We value your privacy

Why c15t?

Performance First

Style With your own CSS

We value your privacy

i18n Support

We value your privacy

Geo Location

Framework Compatible

React

Vue

Svelte

React

Vue

Svelte

React

Vue

Svelte

React

Vue

Svelte

Angular

Next.js

Astro

Angular

Next.js

Astro

Angular

Next.js

Astro

Angular

Next.js

Astro

What can you build with c15t?

Build the consent experience your product needs

Control scripts and requests before they run

Choose hosted, self-hosted, or offline operation

Model consent by category and policy

Serve international products without forking the UI

Integrate through framework-native, typed APIs

A practical c15t implementation path

What the community are saying.

Ready to get started?