@c15t/tanstack-start: TanStack Start cookie banner and cookie consent management

Cookie banner, consent dialog, and preference center for TanStack Start. A server function in the root loader resolves each visitor's consent policy, such as GDPR opt-in in the EU, so the banner is in the first HTML.

c15t is used by 2,100+ sites, including expo.dev, zed.dev, unkey.dev, mintlify.com, and sazabi.com.

Key Features

• Works with @tanstack/react-start 1.168.60 or a later 1.x release, including TanStack Start 1.0, on React 18 or 19
• The root route loader resolves each visitor's policy on the server, so the banner is in the first HTML and does not appear late
• Your policy downloads at build time with consentManifest() and stays on the server
• Request middleware reads CDN location, language, and Global Privacy Control headers
• Prerendered pages and static hosts work too, with createConsentRoute() for same-origin consent requests
• Prebuilt cookie banner, consent dialog, and preference center with a theme system
• Headless hooks for a fully custom design
• Analytics, ads, and pixels follow each visitor's choice through @c15t/integrations: Google Tag Manager, Google Consent Mode v2, GA4, Meta Pixel, PostHog, and more
• IAB TCF 2.4 banner, dialog, and hooks through the @c15t/react/iab subpath
• Translations for 53 languages through @c15t/translations

Prerequisites

• @tanstack/react-start 1.168.60 or a later 1.x release, including TanStack Start 1.0
• @tanstack/react-router 1.170.41 or a later 1.x release, at the version your @tanstack/react-start release depends on. TanStack Start 1.0 needs at least 1.170.43
• Vite 7 or later, or Vite 8 or later for TanStack Start 1.0
• React 18 or 19
• Node.js 20.19 or later, or Node.js 22.12 or later for TanStack Start 1.0
• An Inth project (free sign-up). For development and tests, local mode needs no backend

Installation

pnpm add @c15t/tanstack-start

Then add the prebuilt stylesheet to your app-level CSS entry point:

/* src/styles.css */
@import "@c15t/tanstack-start/styles.css";

Using several c15t packages? Install c15t and import c15t/tanstack-start instead. It is the same code.

Usage

1. Set VITE_C15T_BACKEND_URL to your Inth backend URL in .env
2. Add consentManifest() from @c15t/tanstack-start/build to vite.config.ts, before tanstackStart(). It downloads your policy at build time and keeps it on the server

// vite.config.ts
import { consentManifest } from '@c15t/tanstack-start/build';
import { tanstackStart } from '@tanstack/react-start/plugin/vite';
import viteReact from '@vitejs/plugin-react';
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [consentManifest(), tanstackStart(), viteReact()],
});

3. Resolve the consent state in the root route loader with createConsentStateHandler() in a server function, and pass it to ConsentRoot

// src/routes/__root.tsx
import { createRootRoute, Outlet } from '@tanstack/react-router';
import { createServerFn } from '@tanstack/react-start';
import {
  ConsentBanner,
  ConsentDialog,
  ConsentDialogLink,
  ConsentRoot,
} from '@c15t/tanstack-start';
import {
  consentLoaderOptions,
  createConsentStateHandler,
} from '@c15t/tanstack-start/server';

const getConsentState = createServerFn({ method: 'GET' }).handler(
  createConsentStateHandler()
);

export const Route = createRootRoute({
  ...consentLoaderOptions,
  loader: async () => ({ consent: await getConsentState() }),
  component: RootComponent,
});

function RootComponent() {
  const { consent } = Route.useLoaderData();
  return (
    <ConsentRoot state={consent}>
      <Outlet />
      <ConsentBanner />
      <ConsentDialog />
      <ConsentDialogLink>Privacy settings</ConsentDialogLink>
    </ConsentRoot>
  );
}

4. For the full setup, see the TanStack Start quickstart

Run c15t on Inth

c15t needs a backend to serve policies and keep consent records. Inth runs it for you. It stores every choice with its region and policy version, audits your live site and pull requests for privacy risk, and on Pro and above keeps each region's consent rules current with managed policy packs. You don't run the consent database, geo lookups, uptime, or upgrades.

Sign-up is free. Run npx @inth/cli c15t to create a project and set up c15t, or create one by hand and copy its backend URL.

For development and tests, local mode keeps choices in the browser and keeps no consent records. Don't ship it to production. Its factory is local(). The old name, offline(), still works and goes away in v4.

Documentation

See the documentation for guides, API reference, and examples.

Docs for AI Agents

This package ships its documentation as Markdown, matched to the installed version. After you install it, point your coding agent at node_modules/@c15t/tanstack-start/AGENTS.md. It indexes every guide in node_modules/@c15t/tanstack-start/docs/.

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.

Support

• Join our Discord community
• Open an issue on our GitHub repository
• Visit inth.com and use the chat widget
• Contact our support team via email [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

Apache License 2.0

Built by Inth