@c15t/react: React Consent Components

Headless cookie banner, consent manager & preference center for React. RSC-compatible, GDPR/CCPA/LGPD/TCF, TypeScript-first.

Key Features

• Works with React 19, 18, 17, and 16.8
• Full 'use client' support for React Server Components
• Headless and fully customizable UI components
• Automatic GDPR compliance
• Minimal configuration with TypeScript-first design
• Comprehensive Consent Management Platform (CMP)
• Flexible Cookie Banner and Preference Center components
• Built-in internationalization support
• Seamless consent storage and tracking

Prerequisites

• React 16.8 or later
• Node.js 18.17.0 or later
• A hosted c15t instance (free sign-up) or self-hosted deployment

Quick Start

Easiest setup with @c15t/cli:

# Set up c15t in your project
pnpm dlx @c15t/cli setup
# Alternatives:
# npx @c15t/cli setup
# bunx --bun @c15t/cli setup

The CLI will:

• Install necessary packages
• Configure your c15t instance
• Set up environment variables
• Add consent management components to your app

Manual Installation

pnpm add @c15t/react

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

/* src/index.css */
@import "@c15t/react/styles.css";

If you use the prebuilt IAB TCF UI, also import @c15t/react/iab/styles.css. It is published separately so non-IAB apps do not ship those component rules.

To manually install, follow the guide in our docs – manual setup.

Usage

1. Import ConsentManagerProvider in your app's root component
2. Add ConsentBanner and ConsentDialog components
3. Customise styling and behaviour to fit your app
4. For full implementation details, see the React quickstart docs

// App.tsx
import {
  ConsentManagerProvider,
  ConsentBanner,
  ConsentDialog,
} from '@c15t/react'

function App() {
  return (
    <ConsentManagerProvider>
      <YourApp />
      <ConsentBanner />
      <ConsentDialog />
    </ConsentManagerProvider>
  )
}

Documentation

For further information, guides, and examples visit the reference documentation.

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

• We're open to all community contributions.
• Read our Contribution Guidelines
• Review our Code of Conduct
• Fork the repository
• Create a new branch for your feature
• Submit a pull request
• All contributions, big or small, are welcome and appreciated.

Security

If you believe you have found a security vulnerability in c15t, we encourage you to responsibly disclose this and NOT open a public issue. We will investigate all legitimate reports.

Our preference is that you make use of GitHub's private vulnerability reporting feature to disclose potential security vulnerabilities in our open-source software. To do this, please visit https://github.com/c15t/c15t/security and click the "Report a vulnerability" button.

Security Policy

• Please do not share security vulnerabilities in public forums, issues, or pull requests
• Provide detailed information about the potential vulnerability
• Allow reasonable time for us to address the issue before any public disclosure
• We are committed to addressing security concerns promptly and transparently

License

Apache License 2.0

Built by Inth