npm install c15t
- Next.jsc15t/next
- TanStack Startc15t/tanstack-start
- Reactc15t/react
- Nuxtc15t/vue
- Vuec15t/vue/vue-plugin
- Astroc15t/astro
- JavaScriptc15t/runtime
c15t
Next.js, TanStack Start, React, Nuxt, Vue, Astro, and JavaScript import from c15t.
10 frameworks, one cookie banner.
Next.js to plain HTML. Each framework has a quickstart and its own guides. Pick yours, or let your coding agent set c15t up.
Not sure which setup your app needs? Find your app.
c15t/next
c15t/tanstack-start
c15t/react
c15t/vue
c15t/vue/vue-plugin
c15t/astro
@c15t/svelte
@c15t/svelte
@c15t/browser
c15t/runtime
components/consent.tsx
import {
ConsentBanner, ConsentDialog, ConsentDialogLink, ConsentRoot,
} from 'c15t/next';
import { defineConsentConfig, resolveConsent } from 'c15t/next/server';
import type { ReactNode } from 'react';
export const consentConfig = defineConsentConfig({
backendURL: 'https://your-project.inth.app',
});
export function Consent({ children }: { children: ReactNode }) {
const state = resolveConsent({ config: consentConfig });
return (
<ConsentRoot state={state} config={consentConfig}>
{children}
<ConsentBanner />
<ConsentDialog />
<ConsentDialogLink>Privacy settings</ConsentDialogLink>
</ConsentRoot>
);
}nuxt.config.ts
export default defineNuxtConfig({
c15t: {
backendURL: 'https://your-project.inth.app',
},
modules: ['c15t/vue'],
});astro.config.mjs
// Astro 7 with the Svelte dialog integration.
import svelte from '@astrojs/svelte';
import { defineConfig } from 'astro/config';
import c15t, { hosted } from 'c15t/astro';
export default defineConfig({
integrations: [
svelte(),
c15t({
mode: hosted({ backendURL: 'https://your-project.inth.app' }),
ui: 'svelte', // Use the framework your site already ships.
}),
],
output: 'static', // Consent resolves in the browser.
});index.html
<head>
<script
src="https://your-project.inth.app/c15t.js"
defer
></script>
</head>
<body>
<footer>
<a href="#c15t-preferences">Privacy settings</a>
</footer>
</body>Also in TanStack Start, React, Vue, Svelte, SvelteKit and JavaScript.
@c15t/integrations
Helpers for analytics, pixels, chat and embeds, a separate install in every framework.
Svelte, SvelteKit, and HTML use their own package: @c15t/svelte and @c15t/browser.
Next.js App Router with a Next.js server
Server resolves consent from a build-time manifest and streams it to the page
App RouterNext.js App Router, page must arrive with its banner
Await consent inside
Stream or awaitSuspenseNext.js with static, ISR,
'use cache'orensureStatic = 'navigation'pagesBrowser resolves consent on those pages
Static, ISR and cached pagesNext.js Pages Router
Resolve consent in
Pages RoutergetServerSidePropsNext.js with
output: 'export'Browser resolves consent
Static export
TanStack Start with a server
Root loader resolves consent on the server
TanStack StartTanStack Start on a serverless host, banner may follow the page
Root loader streams consent
TanStack Start renderingTanStack Start in SPA mode or prerendered
Browser resolves consent
TanStack Start rendering
React with Vite, or another single-page app
Browser resolves consent
ReactReact Router framework mode, Remix, or another server-rendered React app
Browser resolves consent after hydration
React rendering
Nuxt with a Nuxt server
Nuxt module resolves consent on the server from a build-time manifest
NuxtNuxt with prerendered or cached routes
Nuxt server for most pages, the browser on prerendered and cached routes
Nuxt prerendered and cached routesNuxt with
nuxt generateon static hostingNuxt module, browser resolves consent from the manifest or
Nuxt static hosting/initNuxt with
ssr: falseNuxt module, browser resolves consent from the manifest
Nuxt single-page app
Vue with Vite
Vue plugin, browser resolves consent
VueVue rendered on the server without Nuxt
Vue plugin; the banner mounts after hydration. Use Nuxt for the banner in server HTML.
Vue rendering
Astro with static output
Browser resolves consent through the hosted backend
Astro static outputAstro with server output and an adapter
Middleware resolves consent from a build-time manifest
Astro server output
Svelte with Vite
Svelte provider, browser resolves consent
Svelte
SvelteKit with a server
Root layout load resolves consent on the server
SvelteKitSvelteKit with
adapter-static, prerendered pages or SPA modeBrowser resolves consent
SvelteKit rendering
Plain HTML, a CMS, a page builder, or a static site generator such as Hugo or Eleventy
One script tag, stock banner included
HTML
JavaScript with a bundler and no UI framework
JavaScript@c15t/browsermodule, stock banner includedYour own UI, or a framework without an adapter such as Solid
Headless runtime
JavaScript headless
After the quickstart.
A banner on screen does not mean analytics wait for consent. Move existing scripts into c15t, replace embeds that load on their own, and keep a link to reopen preferences. Then verify the integration.