DOCSEARCHbyAlgolia
Submit Docs

c15t Documentation

repository·canary·Indexed 23 days ago

https://github.com/c15t/c15t

A developer-first consent management platform (CMP) for building custom or prebuilt cookie banners and privacy preference centers. c15t supports Consent Mode v2, IAB TCF, and self-hosted workflows, with deep integration for React and Next.js. It includes a CLI for setup and migrations, a backend package (@c15t/backend) supporting multiple database adapters (Drizzle, Kysely, Prisma, TypeORM, Mongo), and comprehensive benchmark suites to measure runtime performance and bundle sizes.

Tokens
331.3K
Snippets
736
Records
1.6K
Agent score
82%

What's inside c15t

  1. Overview of @c15t/translations

    canary

    @c15t/translations provides type-safe internationalization (i18n) utilities specifically designed for consent management within the c15t ecosystem. It allows developers to implement multilingual support for cookie banners, consent dialogs, and various consent types with high type safety.

    Key Features

    • Type-safe interfaces: Ensures translation keys match the expected consent management structure.
    • Modular imports: Import specific language packs (e.g., English) as needed.
    • Flexible configuration: Supports both partial and complete translation configurations.
    • Granular definitions: Includes specific translation types for cookie banners, consent dialogs, and consent types.
    • Language management: Supports flexible language configuration with optional auto-language switching.

  2. Overview of c15t Core Features

    canary

    c15t is a headless JavaScript consent management platform designed for cookie banners, privacy preferences, and consent-aware script gating.

    Key capabilities include:

    • Cookie consent: Building flows for banners, dialogs, and preference centers.
    • Headless APIs: Managing consent state and persistence while allowing you to own the UI.
    • Framework agnostic: Compatible with JavaScript/TypeScript and SSR frameworks.
    • Script gating: Integration with @c15t/scripts for managing tools like Google Tag Manager, Consent Mode v2, and Meta Pixel.
    • Internationalization: Built-in support for translations.

  3. Overview of c15t Benchmark Suites

    canary

    The c15t benchmark platform is divided into Performance Suites and Compatibility Suites to measure runtime work, bundle sizes, and framework compatibility.

    Performance Suites

    • core-benchmarks: Measures framework-agnostic runtime work (e.g., store creation, has(), cookie round-trips, init, repeat-visitor init, and script updates).
    • bundle-test-app: Measures route-level client script size and publish tarball sizes for c15t, @c15t/react, and @c15t/nextjs using a dedicated Next app.
    • react-browser-bench: Uses Playwright against a React-flavored benchmark app with local deterministic API routes.
    • nextjs-browser-bench: Uses Playwright against a Next integration benchmark app covering client, prefetch, SSR, and repeat-visitor paths.
    • script-lifecycle-bench: Measures deterministic local script lifecycle flows (load, unload, reload, callback-only, alwaysLoad, and persistAfterConsentRevoked).
    • shared: Contains shared schemas, fixtures, budgets, comparison logic, and report formatting.

    Compatibility Suites

    • css-layer-preview: Manual review shell for the shared CSS matrix.
    • tw3-test: Tailwind 3 compatibility harness.
    • tw4-test: Tailwind 4 compatibility harness.
    • no-tw-test: Plain CSS compatibility harness.

  4. Overview of c15t packages

    canary

    The c15t ecosystem provides a comprehensive suite of tools for consent management, ranging from headless core logic to framework-specific UI integrations and backend services.

    Core Packages

    • c15t: The headless JavaScript consent management platform. Supports cookie consent, privacy preferences, local storage, and SSR.
    • @c15t/react: React-specific integration (v16.8 to v19) providing prebuilt UI, headless hooks, and RSC compatibility.
    • @c15t/nextjs: Specialized integration for Next.js (App Router and Pages Router) with SSR and React Server Components support.
    • @c15t/translations: Type-safe internationalization support for consent components.
    • @c15t/scripts: Consent-aware integrations for third-party scripts like Google Tag Manager, GA4, Meta Pixel, and more.
    • @c15t/iab: IAB TCF 2.3 addon for TC String generation and programmatic ad controls.

    Infrastructure & Tooling

    • @c15t/backend: Self-hosted consent backend featuring a policy engine, geolocation, and audit logs.
    • @c15t/node-sdk: A type-safe Node.js client for accessing hosted or self-hosted APIs.
    • @c15t/cli: Command-line interface for configuration generation, database migrations, and guided workflows.
    • @c15t/dev-tools: Experimental developer utilities and UI component helpers.

  5. Overview of c15t CLI commands

    canary

    The @c15t/cli provides several core capabilities for managing consent in your project:

    • setup: An interactive scaffolder that detects your framework (e.g., React, Next.js), installs necessary packages, configures the consent client, sets environment variables, and adds banner and dialog components.
    • generate: Generates the required schema and code for consent management.
    • codemods: Runs automated migrations between c15t versions (for example, renaming components from v1 to v2 or updating gdprTypes to consentCategories).
    • self-host migrate: Executes database migrations for deployments using a self-hosted @c15t/backend.
    • skills: Installs reusable c15t agent skills designed for AI-assisted development tooling.
    • login / logout: Handles authentication with the hosted control plane at inth.com.

  6. Overview of c15t Consent Management

    canary

    c15t is a developer-first consent management platform (CMP) designed for JavaScript, React, and Next.js teams. It allows you to build cookie banners, preference centers, and privacy preference flows either using prebuilt UI components or headless APIs.

    Unlike traditional black-box third-party snippets, c15t keeps consent management inside your application stack. This enables you to gate analytics, ads, pixels, tag managers, and chat widgets behind specific consent states (e.g., marketing, measurement, or functional consent).

  7. Understand the c15t technology stack and licensing

    canary

    c15t is built on a modern, permissive stack designed for transparency and customization:

    • Core Platform: Licensed under Apache-2.0, allowing for easy adoption and modification.
    • UI Components: Built using shadcn/ui, which provides developers with complete control over the visual implementation and customization.
    • Server Components: Provides full support for the Next.js app directory, enabling integration into modern React-based applications.
    • Deployment: Supports self-hosting for complete data control, with an optional managed cloud service planned for the future.

  8. Common use cases for @c15t/node-sdk

    canary

    The Node.js SDK is designed for server-side automation and integration, including:

    • Synchronizing consent records between your application and c15t.
    • Building administrative tools for managing hosted or self-hosted consent APIs.
    • Automating privacy preference workflows via server-side jobs.
    • Integrating c15t consent records with internal data systems.

  9. Configure consent via Policy Packs vs. Automatic Jurisdiction Mapping

    canary

    c15t determines which consent model to apply using one of two methods:

    1. Policy Packs (Recommended): You explicitly set the model per region in a PolicyConfig. This provides full control over which regions receive which model. When using policy packs, the consent.model field in each policy directly sets the model, bypassing automatic mapping.
    2. Automatic Jurisdiction Mapping (Legacy Default): If no policy pack is configured, c15t detects the visitor's jurisdiction via geolocation and maps it to a model automatically. This provides less control over UI, scope, and categories.

  10. Understand the IABConsentDialog interface and tabs

    canary

    The IABConsentDialog provides two primary tabs for managing user preferences:

    Purposes Tab

    Displays IAB purposes categorized into:

    • Standalone purposes: Purpose 1 (Store and/or access information on a device) is always shown standalone.
    • Stacks: Groups of related purposes determined by the GVL. These are expandable to show individual toggles.
    • Special features: Opt-in features like precise geolocation.
    • Essential functions: Special purposes/features that are locked (no toggle) because they are required for basic operation.

    Each purpose includes its name, description, vendor count, consent toggle, and legitimate interest toggle (where applicable).

    Vendors Tab

    Displays all vendors from the GVL plus any custom vendors. Features include:

    • Search and filter functionality.
    • Per-vendor consent and legitimate interest toggles.
    • Vendor details: privacy policy links, cookie usage, and data retention information.

  11. Understand the c15t styling escalation ladder

    canary

    c15t provides multiple levels of customization. You should follow the 'escalation ladder' by starting with the lowest-power tool that solves your problem to avoid unnecessary complexity or breaking component behavior.

    1. Component and provider APIs: Use for reordering actions, changing button emphasis, or changing copy via i18n.
    2. Design tokens: Use for global semantic changes (colors, typography, spacing, etc.).
    3. Slots: Use for targeting specific component parts (e.g., consentBannerFooter) when the part is correct but needs local styling adjustments.
    4. CSS variables / className: Use for integrating with external CSS systems or utility classes.
    5. Compound components: Use when you must rearrange the markup/structure while still using c15t primitives.
    6. noStyle: Use when you want the c15t structure but need to replace all visual defaults.
    7. Headless: Use when you need to replace both the markup and the behavior entirely.

  12. PostHog Privacy and GDPR Compliance

    canary

    When using PostHog with c15t, follow these best practices for GDPR compliance:

    • Region: Use PostHog Cloud EU for robust compliance.
    • Cookieless Mode: While cookieless mode helps avoid browser persistence when measurement consent is rejected, it is not a substitute for legal requirements. You are still responsible for your own legal basis, consent language, data minimization, IP capture settings, and right-to-be-forgotten processes.