file: ./src/content/core/api-reference.mdx
meta: {
  "title": "API Reference",
  "description": "Comprehensive guide to using the c15t package for managing privacy consents."
}
        
# Core Package API Reference

The core package (`c15t`) provides the fundamental functionality for managing privacy consents in your application. This reference documents the main types, interfaces, and functions available in the package.

## Store API

The core package implements a robust state management system for handling privacy consents. The store provides methods for:

* Managing consent states
* Persisting consent data
* Validating consent configurations

For detailed implementation examples, refer to the [Getting Started](/core/getting-started) guide.

## Privacy Consent State

The `PrivacyConsentState` type represents the current state of privacy consents in your application. It contains information about user preferences, consent categories, and their respective settings.

<AutoTypeTable path="node_modules/c15t/src/index.ts" name="PrivacyConsentState" />

## Consent Types

The `ConsentType` type defines the structure of individual consent categories and their properties.

<AutoTypeTable path="node_modules/c15t/src/index.ts" name="ConsentType" />

## Translation Configuration

The `defaultTranslationConfig` provides the default translation settings for the consent management interface.

<AutoTypeTable path="node_modules/c15t/src/index.ts" name="defaultTranslationConfig" />

## Tracking Blocker Configuration

The `TrackingBlockerConfig` type defines the configuration options for the tracking blocker functionality.

<AutoTypeTable path="node_modules/c15t/src/index.ts" name="TrackingBlockerConfig" />

## Additional Types

### Consent State

<AutoTypeTable path="node_modules/c15t/src/index.ts" name="ConsentState" />

### Compliance Settings

<AutoTypeTable path="node_modules/c15t/src/index.ts" name="ComplianceSettings" />

### Privacy Settings

<AutoTypeTable path="node_modules/c15t/src/index.ts" name="PrivacySettings" />

### Translation Types

<AutoTypeTable path="node_modules/c15t/src/index.ts" name="TranslationConfig" />

<AutoTypeTable path="node_modules/c15t/src/index.ts" name="Translations" />


file: ./src/content/core/how-it-works.mdx
meta: {
  "title": "How It Works",
  "description": "In-depth explanation of the architecture and functionality of the c15t package."
}
        
## Overview

The `c15t` package is a headless library that provides the foundational logic and state management for privacy consent management. It allows developers to build custom user interfaces while leveraging a robust backend for consent tracking and management.

## Architecture

### Headless Design

* **Separation of Concerns**: The library focuses solely on the logic and state management of consents, leaving the UI implementation to developers. This separation allows for greater flexibility and customization.
* **Composable API**: The API is designed to be composable, enabling developers to integrate it seamlessly into their existing applications.

### State Management

* **Zustand Store**: The core of the library is built on Zustand, a small, fast, and scalable state management solution. This ensures efficient state updates and reactivity.
* **Centralized State**: All consent-related data is managed in a centralized store, making it easy to access and update consent states across the application.

## Key Concepts

### Consent Management

* **Consent Types**: The library supports various consent types (e.g., analytics, marketing) that can be customized based on application needs.
* **Dynamic Updates**: Consents can be updated dynamically, allowing for real-time changes based on user interactions or external factors.

### Privacy Compliance

* **GDPR Support**: The library includes built-in support for GDPR compliance, with features to manage consent types and user preferences.
* **Region-Specific Settings**: Developers can configure compliance settings based on user location, ensuring adherence to regional privacy laws.

## How to Use

### Creating a Consent Store

To start using the library, create a consent manager store:

```typescript
import { createConsentManagerStore } from 'c15t';

const store = createConsentManagerStore();
```

### Managing Consents

* **Set Consent**: Update consent for a specific type.
  ```typescript
  store.getState().setConsent('analytics', true);
  ```

* **Save Consents**: Save user preferences.
  ```typescript
  store.getState().saveConsents('all');
  ```

* **Reset Consents**: Reset all consents to default values.
  ```typescript
  store.getState().resetConsents();
  ```

### Integrating with UI

* **Custom UI Components**: Use the store's state and methods to build custom UI components that reflect the current consent states and allow users to update their preferences.
* **React Hooks**: Leverage React hooks to connect your components to the consent store, ensuring they react to state changes.

## Advanced Features

### Callbacks and Events

* **Event Handling**: The library supports event callbacks for consent actions, allowing developers to execute custom logic when consents are updated.
* **Custom Callbacks**: Set custom callbacks for specific consent events to handle application-specific logic.

### Privacy Settings

* **Configurable Settings**: Developers can configure privacy settings to control how consents are managed and displayed.
* **Dynamic Adjustments**: Adjust privacy settings dynamically based on user interactions or external data.

## Conclusion

The `c15t` package provides a powerful and flexible solution for managing privacy consents in modern applications. Its headless architecture and robust state management make it an ideal choice for developers looking to build custom consent interfaces while ensuring compliance with privacy regulations.


file: ./src/content/core/index.mdx
meta: {
  "title": "Core Documentation",
  "description": "Comprehensive guide to using the c15t package for managing privacy consents."
}
        
import CoreCookieBannerExample from '../../examples/core/index';

## Introduction

The `c15t` package is a powerful headless library that transforms privacy consent management into a fully observable system. Built with modern web applications in mind, it provides a robust foundation for implementing privacy-compliant consent management while giving developers complete control over the user interface.

### Key Features

* **🎯 Zero UI Dependencies**: A truly headless solution that doesn't impose any UI constraints
* **⚡️ High Performance**: Optimized state management with minimal overhead
* **🔄 Real-time Updates**: Instant state synchronization across your application
* **🛡️ Type-safe**: Built with TypeScript for enhanced developer experience
* **📦 Lightweight**: Small bundle size with zero dependencies
* **🔌 Framework Agnostic**: Works with any JavaScript framework or vanilla JS

## Why Use c15t?

* **Headless Architecture**: Provides the core logic and state management for consent without imposing any UI constraints, allowing developers to build custom interfaces tailored to their application's needs.
* **Custom UI Development**: Perfect for teams that want to design their own consent interfaces while leveraging robust backend logic.
* **Flexibility and Control**: Offers complete control over how consents are displayed and managed, enabling seamless integration with existing systems and workflows.

## Installation

To install the package, use one of the following commands:

```package-install
c15t
```

### Basic Setup

To create a consent manager store, import and use the `createConsentManagerStore` function. This store will handle all consent-related state and logic:

```typescript
import { createConsentManagerStore } from 'c15t';

const store = createConsentManagerStore();

// Subscribe to state changes
const unsubscribe = store.subscribe(
  state => console.log('Consent updated:', state.consents)
);

// Update consent
store.getState().setConsent('analytics', true);
```

## State Management

The store provides several methods to manage consent states:

```typescript
// Get current consent state
const analyticsConsent = store.getState().consents.analytics;

// Subscribe to specific consent changes
const unsubscribe = store.subscribe(
  state => {
    if (state.consents.analytics) {
      // Initialize analytics
    }
  }
);

// Batch update multiple consents
store.getState().setConsents({
  analytics: true,
  marketing: false
});

// Save current consent state
store.getState().saveConsents();
```

## Best Practices

1. **Early Initialization**: Initialize the consent manager as early as possible in your application lifecycle.
   ```typescript
   // In your app's entry point
   const store = createConsentManagerStore();
   ```

2. **Consent Persistence**: Always handle consent persistence properly:
   ```typescript
    const store = createConsentManagerStore();

   // Save consents when user confirms choices
   function handleConsentConfirmation() {
     store.getState().saveConsents();
   }
   ```

## Example Implementation using Vanilla JavaScript

This is a basic example of how to implement the consent manager store to create a cookie banner using vanilla JavaScript.

<CoreCookieBannerExample />

### Use Cases

1. **Custom Consent UI**: Use the core library to manage consent logic while building a custom UI that matches your application's design language.
2. **Integration with Analytics**: Seamlessly integrate consent management with analytics tools to ensure compliance with privacy regulations.
3. **Dynamic Consent Management**: Adjust consent options dynamically based on user location or preferences, using the library's flexible API.

### Managing Consents

You can manage user consents using various methods provided by the store:

<Tabs groupId="Method" items={["Set Consent", "Save Consents", "Reset Consents"]}>
  <Tab value="Set Consent">
    Update consent for a specific type.

    ```typescript
    import { createConsentManagerStore } from 'c15t';

    const store = createConsentManagerStore();

    store.getState().setConsent('marketing', true);
    ```
  </Tab>

  <Tab value="Save Consents">
    Save user preferences.

    ```typescript
    import { createConsentManagerStore } from 'c15t';

    const store = createConsentManagerStore();

    store.getState().saveConsents('all');
    ```
  </Tab>

  <Tab value="Reset Consents">
    Reset all consents to default values.

    ```typescript
    import { createConsentManagerStore } from 'c15t';

    const store = createConsentManagerStore();

    store.getState().resetConsents();
    ```
  </Tab>
</Tabs>


file: ./src/content/getting-started/ai-tools-integrations.mdx
meta: {
  "title": "AI Tools Integrations",
  "description": "Learn how to integrate Consent Management (c15t) with AI tools and language models through the standardized llms.txt file. This guide explains how to access and import the llms.txt file to enhance your development workflow with AI-powered tools like Cursor."
}
        
## Overview

The `llms.txt` file is a standardized resource designed to provide concise, LLM-friendly information about a website. By accessing this file, you can enhance your experience with tools that utilize language models, such as Cursor. This document will guide you on how to import the `llms.txt` file into your tools.

## Accessing the `llms.txt` or `llms-full.txt` File

To access the `llms.txt` or `llms-full.txt` file, simply navigate to the following URL in your web browser:

[https://c15t.com/llms.txt](https://c15t.com/llms.txt)
[https://c15t.com/llms-full.txt](https://c15t.com/llms-full.txt)

This file contains essential information structured in a way that is both human-readable and easily processed by language models. It includes:

* A brief overview of the project or website.
* Links to detailed documentation and resources.
* Additional context that can assist in understanding the content.

## Importing into Cursor

Once you have accessed the `llms.txt` file, you can import it into Cursor or similar tools by following these steps:

1. **Open Cursor**: Launch the Cursor application on your device.

2. **Navigate to Import Options**: Look for the import feature within the tool. This is typically found in the settings or tools menu.

3. **Enter the URL**: When prompted, enter the URL of the `llms.txt` file:
   ```
   https://c15t.com/llms.txt
   ```

4. **Confirm Import**: Follow any additional prompts to confirm the import. Cursor will fetch the content from the provided URL and integrate it into your workspace.

5. **Utilize the Information**: Once imported, you can leverage the structured information from the `llms.txt` file to enhance your queries, access relevant documentation, and improve your overall experience with the tool.

## Benefits of Using `llms.txt`

* **Concise Information**: Quickly access essential details without sifting through complex HTML pages.
* **Enhanced Context**: Get relevant links and descriptions that help you understand the content better.
* **Improved Workflow**: Streamline your development process by having all necessary information at your fingertips.


file: ./src/content/getting-started/index.mdx
meta: {
  "title": "Introduction to Consent Management (c15t)",
  "description": "Transform privacy consent from a compliance checkbox into a fully observable system. Built for modern development teams, c15t unifies analytics, consent tracking, and privacy controls into a single performant solution - no more slow cookie banners or blind spots in user privacy choices."
}
        
## What is Consent Management?

Consent Management (c15t) is an open-source platform that transforms privacy consent from a compliance checkbox into a fully observable system. Built for modern development teams, it provides a unified solution for:

* Analytics integration
* Consent management
* Privacy controls
* Complete consent state visibility

Gone are the days of:

* Cookie banners slowing down your site
* Blind spots in consent tracking
* Complex multi-vendor implementations
* Uncertainty about privacy policy changes
* Poor visibility into consent states

## Core Principles

### 1. Open Source First

Building in public isn't just about transparency - it's about creating better tools through community collaboration. Our open-source foundation means you can:

* Inspect and understand the code handling user consent
* Contribute improvements and fixes
* Self-host for complete control
* Trust through transparency

### 2. Developer Experience

Privacy management should feel natural in your development workflow:

* TypeScript-first APIs with full type safety
* Modern React patterns and hooks
* Intuitive state management
* Comprehensive documentation

### 3. Performance as Standard

Every byte matters. c15t is built with performance in mind:

* Minimal bundle impact
* Efficient state management
* Optimized server/client patterns
* Smart code splitting

### 4. Privacy by Design

Privacy isn't an afterthought - it's a core part of modern web development:

* GDPR-compliant by default
* Granular consent controls
* Complete audit trail
* Privacy-first architecture

## Get Started

Ready to modernize your privacy infrastructure? Choose your path:

<Cards>
  <Card title="Quick Start Guide" description="Set up c15t in your project in under 5 minutes" href="/docs/framework/react" />

  <Card title="Open Source" description="Contribute to c15t and help build a better privacy infrastructure" href="/docs/getting-started/open-source" />
</Cards>


file: ./src/content/getting-started/regulations.mdx
meta: {
  "title": "Privacy Regulations Guide",
  "description": "Understanding key privacy regulations and compliance requirements"
}
        
This guide provides an overview of major privacy regulations and their key requirements. Understanding these regulations is crucial for organizations handling personal data.

## Key Privacy Regulations

### GDPR (General Data Protection Regulation)

The GDPR is the European Union's comprehensive privacy regulation that protects EU residents' personal data and privacy rights.

#### Key Requirements

* **Transparent Processing**: Clear communication about how data is collected and used
* **Data Minimization**: Collect only what's necessary for specific purposes
* **Purpose Limitation**: Use data only for specified, legitimate purposes
* **Lawful Basis**: Have legal grounds for processing personal data
* **Data Subject Rights**:
  * Right to access their data
  * Right to be forgotten (erasure)
  * Right to data portability
  * Right to rectification
  * Right to restrict processing
* **Privacy by Design**: Build privacy into systems from the start
* **Breach Notification**: Report breaches within 72 hours
* **Impact Assessments**: Conduct DPIAs for high-risk processing

#### Business Implications

* Need for comprehensive data mapping
* Regular privacy impact assessments
* Staff training on data protection
* Documentation of processing activities
* Appointment of Data Protection Officers (when required)

### CCPA (California Consumer Privacy Act)

The CCPA provides California residents with rights regarding their personal information collected by businesses.

#### Key Requirements

* **Transparency**:
  * Disclose data collection practices
  * Inform consumers of their rights
  * Provide privacy notices
* **Consumer Rights**:
  * Right to know what personal information is collected
  * Right to delete personal information
  * Right to opt-out of data sales
  * Right to non-discrimination
* **Business Obligations**:
  * Respond to consumer requests within 45 days
  * Verify consumer identities
  * Update privacy policies annually
  * Train staff handling consumer inquiries

#### Business Implications

* Need for data inventory systems
* Process for handling consumer requests
* Staff training on CCPA requirements
* Regular policy updates
* Consumer request verification procedures

### HIPAA (Health Insurance Portability and Accountability Act)

HIPAA sets standards for protecting sensitive patient health information in the United States.

#### Key Requirements

* **Privacy Rule**:
  * Protect patient health information
  * Limit disclosures of health data
  * Provide patient rights over their data
* **Security Rule**:
  * Administrative safeguards
  * Physical safeguards
  * Technical safeguards
* **Breach Notification**:
  * Report breaches affecting 500+ individuals
  * Notify affected individuals
  * Media notification when required
* **Business Associate Compliance**:
  * Written agreements required
  * Ensure partner compliance
  * Monitor third-party handling of data

#### Business Implications

* Need for comprehensive security measures
* Regular risk assessments
* Employee training programs
* Incident response planning
* Business associate management

## Best Practices for Compliance

### Data Collection

1. **Minimization**
   * Collect only necessary information
   * Regular data audits
   * Clear purpose documentation

2. **Consent Management**
   * Clear consent mechanisms
   * Record keeping of consent
   * Easy withdrawal options

3. **Documentation**
   * Data inventory maintenance
   * Processing records
   * Impact assessments

### Data Protection

1. **Security Measures**
   * Access controls
   * Data encryption
   * Regular security updates

2. **Staff Training**
   * Regular privacy training
   * Security awareness
   * Incident response procedures

3. **Third-Party Management**
   * Vendor assessments
   * Contractual safeguards
   * Regular compliance reviews

## Getting Started with Compliance

### 1. Assessment

* Identify applicable regulations
* Map data flows
* Assess current practices
* Document gaps

### 2. Planning

* Develop compliance roadmap
* Allocate resources
* Establish timelines
* Define responsibilities

### 3. Implementation

* Update policies
* Implement controls
* Train staff
* Document procedures

### 4. Monitoring

* Regular audits
* Compliance reporting
* Policy reviews
* Incident response testing

## Resources

### Documentation Needs

* Privacy policies
* Data protection procedures
* Incident response plans
* Training materials

### Templates

* Privacy notices
* Consent forms
* Data subject request forms
* Vendor agreements

## FAQs

### General Questions

**Q: How do we handle international data transfers?**
A: International data transfers require specific safeguards such as Standard Contractual Clauses (SCCs), adequacy decisions, or other approved transfer mechanisms.

**Q: What are the basic steps for GDPR compliance?**
A: Basic steps include data mapping, establishing lawful bases for processing, implementing security measures, updating privacy notices, and creating procedures for data subject rights.

**Q: How often should we review our privacy practices?**
A: Conduct regular reviews at least annually, with additional reviews when regulations change or after significant business changes.

### Compliance Questions

**Q: Do we need a Data Protection Officer?**
A: Under GDPR, a DPO is required for public authorities and organizations conducting large-scale systematic monitoring or processing of sensitive data.

**Q: What constitutes a data breach?**
A: A data breach is a security incident leading to accidental or unlawful destruction, loss, alteration, unauthorized disclosure of, or access to personal data.

## Need Help?

For questions about privacy regulations and compliance:

* Consult legal professionals
* Contact local data protection authorities
* Join industry privacy groups
* Attend compliance training programs

## Updates and Changes

Privacy regulations continue to evolve. Stay informed through:

* Regulatory authority websites
* Legal updates
* Industry newsletters
* Professional associations


file: ./src/content/legals/cookie-policy.mdx
meta: {
  "title": "Cookie Policy"
}
        
## Introduction

This Cookie Policy explains how and why Consent Management Inc (“we,” “us,” “our”) uses cookies and similar tracking technologies on our Website, [c15t.com](https://c15t.com) (“Website”). By using our Website, you consent to our use of cookies in accordance with this policy.

## What Are Cookies?

Cookies are small data files placed on your device when you visit a Website. They help the Website remember your actions and preferences (such as login details or language settings) over a period of time, so you do not have to re-enter them during each visit.

## Types of Cookies We Use

### 1. Essential Cookies

* These cookies are necessary for the Website to function and cannot be disabled. They include cookies that enable you to log in securely.

### 2. Analytics Cookies

* We use analytics cookies, including those deployed by PostHog, to collect data on how you interact with our Website. This non-personally identifiable data is used to improve the Website’s functionality and user experience.

### 3. Functionality and Preference Cookies

* These cookies allow the Website to remember choices you make (such as your preferred language) and provide a more personalized experience.

## Managing Cookies

Most browsers allow you to control cookies through their settings. You can:

* Block or delete cookies via your browser settings.
* Opt-out of specific cookies or tracking technologies when such options are provided on the Website.

Please note that disabling cookies may affect the functionality of this Website and your overall user experience.

## Third-Party Cookies

We may allow third parties (for example, analytics providers like PostHog) to place cookies on our Website. These third parties have their own privacy policies and we do not control the cookies they may use.

## Changes to This Cookie Policy

We may update the Cookie Policy periodically to reflect changes in our practices or for operational, legal, or regulatory reasons. The current version will always be posted on our Website with an updated effective date.

## Contact Us

For questions about this Cookie Policy, please contact us at:

> **Consent Management Inc**\
> 2261 Market Street STE 86311
> San Francisco, CA 94114\
> Email: [support@c15t.com](mailto:support@c15t.com)


file: ./src/content/legals/privacy-policy.mdx
meta: {
  "title": "Privacy Policy"
}
        
## Introduction

Consent Management Inc (“we,” “us,” “our”) operates the website [c15t.com](https://c15t.com) (“Website”). This Privacy Policy describes how we collect, use, disclose, and protect your personal information. By accessing or using the Website, you agree to the practices described in this policy. If you do not agree with these practices, please do not use our Website.

## Applicable Laws and Scope

This policy is designed for a Delaware-based company and informs users worldwide. When you are located in jurisdictions with additional privacy requirements (for example, under the GDPR or CCPA), certain rights and protections may apply. Please refer to the relevant sections below and consult applicable laws for your jurisdiction.

## Information We Collect

### 1. Personal Data

* We may collect personal data that you voluntarily provide when interacting with our Website (for example, your name, email address, and telephone number).

### 2. Automatically Collected Data

* We automatically collect non-personally identifiable information through technologies like cookies and web beacons. This may include IP addresses, browser types, and device identifiers.

### 3. Analytics Data

* We use PostHog to track analytics on our Website. PostHog may collect information such as usage behavior, page views, and interaction data. This information is used solely for enhancing website performance and user experience. For more details, please review PostHog’s own privacy practices on their website.

## How We Use Your Information

We use your personal information to:

* Provide and improve our Website and services.
* Analyze website traffic and usage trends.
* Communicate with you regarding inquiries and updates (subject to your consent where applicable).
* Comply with legal and regulatory requirements.

## Legal Basis for Processing (For Users in Jurisdictions Requiring It)

Where required by law (for example, under the GDPR), our processing is based on:

* Your consent for analytics and marketing purposes.
* Our legitimate interests in operating and improving our Website.
* Any contractual obligations you have with us.

## Information Sharing and Disclosure

We do not sell or rent your personal information. We may share your personal data with:

* **Third-party service providers:** for example, analytics providers like PostHog, who process data on our behalf. These service providers are contractually obligated to maintain the confidentiality and security of your data.
* **Legal authorities:** if required by law or to protect our rights and interests.
* **Other parties:** only with your explicit consent.

## International Data Transfers

Since we serve a worldwide audience, your personal data may be transferred to—and maintained on—servers located outside your state, country, or other jurisdiction (including the United States). We take appropriate steps to ensure that your data is treated securely in accordance with this Privacy Policy and applicable laws.

## Data Retention and Security

* **Data Retention:** We retain personal data only as long as necessary to fulfill its intended purposes or as required by applicable law.
* **Security Measures:** We implement reasonable administrative, technical, and physical safeguards to protect your personal information.

## Your Rights

Depending on your jurisdiction, you may have the right to:

* Access, correct, or delete your personal data.
* Object to or restrict certain processing.
* Withdraw consent.

To exercise these rights, please contact us using the details provided below.

## Children's Privacy

Our Website is not directed to children under 13 years of age. We do not knowingly collect personal information from children. If you believe that we have inadvertently collected such information, please contact us immediately.

## Policy Updates

We may update this Privacy Policy occasionally. If we make material changes, we will update the effective date at the top of the policy and notify you by any required means.

## Contact Us

For questions or concerns regarding this Privacy Policy or our practices, please contact us at:

> **Consent Management Inc**\
> 2261 Market Street STE 86311
> San Francisco, CA 94114\
> Email: [support@c15t.com](mailto:support@c15t.com)


file: ./src/content/core/examples/javascript.mdx
meta: {
  "title": "HTML & JavaScript Cookie Banner",
  "description": "A basic example of how to use the consent manager in JavaScript to make a Cookie Banner."
}
        
import CoreCookieBannerExample from '../../../examples/core/index';

<CoreCookieBannerExample />


file: ./src/content/framework/react/api-reference.mdx
meta: {
  "title": "API Reference",
  "description": "The @c15t/react package provides a React-specific components and hooks for managing privacy consents."
}
        
## `useConsentManager`

The `useConsentManager` hook is used to access the consent manager state and methods.

**Example Usage**

```tsx
import { useConsentManager } from "@c15t/react";

export default function Page() {
  const { resetConsents } = useConsentManager();

  return (
    <>
      {/* ... */}
      <button onClick={resetConsents}>
        Reset Consents
      </button>
    </>
  );
```

**Returns**

<AutoTypeTable path="node_modules/c15t/src/index.ts" name="PrivacyConsentState" />

## `useTranslations`

The `useTranslations` hook is used to translate the text of the consent manager. [See the internationalization guide for more information.](/framework/react/internationalization)

**Example Usage**

```tsx
import * as CookieBanner from "@c15t/react/cookie-banner";
import { useTranslations } from "@c15t/react";

export default function CookieBanner() {
  const { cookieBanner } = useTranslations();
  
	return (
		<CookieBanner.Root>
			<CookieBanner.Card>
				<CookieBanner.Header>
					<CookieBanner.Title>{cookieBanner.title}</CookieBanner.Title>
					<CookieBanner.Description>{cookieBanner.description}</CookieBanner.Description>
				</CookieBanner.Header>
                {/* ... */}
			</CookieBanner.Card>
		</CookieBanner.Root>
	);
}
```

**Returns**

Returns a `Translations` object containing all the text strings used, organized by component:

<AutoTypeTable path="node_modules/c15t/src/index.ts" name="Translations" />

## `ConsentManagerProvider`

The `ConsentManagerProvider` component is used to provide the consent manager context to the components that need it.

**Props**

<AutoTypeTable path="node_modules/@c15t/react/src/index.ts" name="ConsentManagerProviderProps" />

**Example Usage**

```tsx
import { ConsentManagerProvider, CookieBanner, ConsentManagerDialog } from "@c15t/react";

export default function App() {
  return (
    <ConsentManagerProvider initialGdprTypes={['necessary', 'marketing']}>
      <CookieBanner />
      <ConsentManagerDialog />
    </ConsentManagerProvider>
  );
}
```

## `CookieBanner`

The `CookieBanner` component is used to display the cookie banner. [See the cookie banner guide for more information.](/framework/react/cookie-banner)

**Props**

<AutoTypeTable path="node_modules/@c15t/react/src/index.ts" name="CookieBannerProps" />

**Example Usage**

```tsx
import { ConsentManagerProvider, CookieBanner, ConsentManagerDialog } from "@c15t/react";

export default function App() {
  return (
    <ConsentManagerProvider initialGdprTypes={['necessary', 'marketing']}>
      <CookieBanner />
      <ConsentManagerDialog />
    </ConsentManagerProvider>
  );
}
```

## `ConsentManagerDialog`

The `ConsentManagerDialog` component is used to display the consent manager in a dialog. [See the consent manager dialog guide for more information.](/framework/react/consent-manager-dialog)

**Props**

<AutoTypeTable path="node_modules/@c15t/react/src/index.ts" name="ConsentManagerDialogProps" />

**Example Usage**

```tsx
import { ConsentManagerProvider, CookieBanner, ConsentManagerDialog } from "@c15t/react";

export default function App() {
  return (
    <ConsentManagerProvider initialGdprTypes={['necessary', 'marketing']}>
      <CookieBanner />
      <ConsentManagerDialog />
    </ConsentManagerProvider>
  );
}
```

## `ConsentManagerWidget`

This component is the core interface for detailed privacy consent management, enabling users to fine-tune their privacy preferences through an intuitive accordion interface. [Learn more](/framework/react/consent-manager-widget)

**Props**

<AutoTypeTable path="node_modules/@c15t/react/src/index.ts" name="ConsentManagerWidgetProps" />

**Example Usage**

```tsx
import { ConsentManagerWidget } from "@c15t/react";

export default function CustomConsentWidget() {
  return (
    <ConsentManagerWidget>
      <ConsentManagerWidget.AccordionItems />
      <ConsentManagerWidget.Footer>
        <ConsentManagerWidget.RejectButton>
          Deny
        </ConsentManagerWidget.RejectButton>
        <ConsentManagerWidget.AcceptAllButton>
          Accept All
        </ConsentManagerWidget.AcceptAllButton>
      </ConsentManagerWidget.Footer>
    </ConsentManagerWidget>
  );
}
```


file: ./src/content/framework/react/consent-manager-dialog.mdx
meta: {
  "title": "Consent Manager Dialog",
  "description": "An accessible, animated modal interface that wraps the Consent Manager Widget for a focused privacy customization experience."
}
        
import { LayersIcon, CookieIcon, ToggleRightIcon } from 'lucide-react';
import DialogExample from '../../../examples/react/dialog';

The Consent Manager Dialog provides a clean, focused way for users to customize their privacy preferences. Think of it as a spotlight that dims the rest of your application while users make important privacy decisions. When users click "Customize" on your cookie banner, this dialog smoothly appears with detailed privacy controls.

<DialogExample />

## How It Works

The dialog acts as a wrapper around the Consent Manager Widget, adding several key features:

1. A smooth fade-in animation that draws attention to privacy settings
2. An overlay that dims the rest of the application
3. Proper focus management for accessibility
4. Automatic portal rendering to avoid layout issues
5. Smart handling of mounting and unmounting

Let's explore how to implement this in your application.

## Quick Start

First, install the package if you haven't already:

```package-install
@c15t/react
```

Then add the dialog to your application:

```tsx
import {
	ConsentManagerDialog,
	ConsentManagerProvider,
} from "@c15t/react";

function App() {
  return (
    <ConsentManagerProvider>
      <YourApp />
      <ConsentManagerDialog />
    </ConsentManagerProvider>
  )
}
```

The dialog will automatically:

* Mount itself correctly in the DOM
* Handle animations smoothly
* Manage focus when opened
* Maintain accessibility standards

## Understanding Animations

The dialog uses thoughtful animations to create a polished user experience. When opened, it:

1. Fades in an overlay to dim the background
2. Scales and fades in the dialog content
3. Smoothly reverses these animations when closing

You can control this behavior with the `disableAnimation` prop:

```tsx
// Disable animations if needed
<ConsentManagerDialog disableAnimation />
```

## Customizing Appearance

The dialog supports two main approaches to styling:

### Using Themes

Apply custom styles through the theme prop:

```tsx
<ConsentManagerDialog
  theme={{
    "widget.root": "",
	  "widget.branding": "",
	  "widget.footer": "",
	  "widget.footer.sub-group": "",
		"widget.footer.reject-button": "",
		"widget.footer.accept-button": "",
		"widget.footer.customize-button": "",
		"widget.footer.save-button": "",
		"widget.accordion": "",
		"widget.accordion.trigger": "",
		"widget.accordion.trigger-inner": "",
		"widget.accordion.item": "",
		"widget.accordion.icon": "",
		"widget.accordion.arrow.open": "",
		"widget.accordion.arrow.close": "",
		"widget.accordion.content": "",
		"widget.accordion.content-inner": "",
		"widget.switch": "",
		"widget.switch.track": "",
		"widget.switch.thumb": "",
		"widget.dialog": "",
		"widget.dialog.root": "",
		"widget.dialog.header": "",
		"widget.dialog.title": "",
		"widget.dialog.description": "",
		"widget.dialog.content": "",
		"widget.dialog.footer": "",
		"widget.overlay": "",
  }}
/>
```

### Removing Default Styles

For complete styling control, disable the default styles:

```tsx
<ConsentManagerDialog noStyle />
```

This gives you a blank canvas to build upon while maintaining the dialog's functionality.

## Integration Examples

### With Custom Trigger Button

```tsx
function PrivacyCenter() {
  const consentManager = useConsentManager()
  
  return (
    <button
      onClick={() => consentManager.setIsPrivacyDialogOpen(true)}
      className="privacy-button"
    >
      Privacy Settings
    </button>
  )
}
```

## Accessibility Features

The dialog implements several accessibility best practices:

### Focus Management

When the dialog opens, it:

1. Traps focus within the dialog
2. Sets initial focus on the first interactive element
3. Remembers and restores the previous focus position when closed

### Focus Trapping

The dialog implements focus trapping to ensure keyboard navigation remains within the dialog while it's open. This is crucial for:

* **Keyboard users**: Prevents users from accidentally interacting with content hidden behind the modal
* **Screen reader users**: Maintains proper context and prevents confusion
* **WCAG compliance**: Supports 2.4.3 Focus Order and provides proper modal functionality

#### How Focus Trapping Works

The `ConsentManagerDialog` uses the `useFocusTrap` hook internally to:

1. Capture the element that had focus before the dialog opened
2. Set initial focus to the first interactive element inside the dialog
3. Keep focus cycling within the dialog when users press Tab or Shift+Tab
4. Restore focus to the original element when the dialog closes

You can control focus trapping with the `trapFocus` prop:

```tsx
// Default behavior (recommended for accessibility)
<ConsentManagerDialog trapFocus={true} />

// Disable focus trapping (not recommended)
<ConsentManagerDialog trapFocus={false} />
```

<Callout type="info">
  Focus trapping is enabled by default and is recommended for WCAG compliance. Only disable it if you have a specific reason and are implementing alternative accessibility measures.
</Callout>

### Keyboard Navigation

Users can:

* Close the dialog with the Escape key
* Navigate controls with Tab
* Interact with all elements using only the keyboard

### Screen Readers

The dialog announces itself appropriately with:

* Proper ARIA roles and attributes
* Clear labeling of controls
* Status updates when opened/closed

## Technical Details

### Portal Rendering

The dialog uses React's createPortal to render outside your main application hierarchy. This ensures:

* No CSS specificity conflicts
* Proper stacking context
* Clean DOM structure

### Client-side Only

To prevent hydration issues, the dialog only renders on the client side. This is handled automatically through the `isMounted` state.

## API Reference

### Props

| Prop             | Type                      | Description            | Default |
| ---------------- | ------------------------- | ---------------------- | ------- |
| theme            | ConsentManagerWidgetTheme | Theme configuration    | {}      |
| disableAnimation | boolean                   | Turns off animations   | false   |
| noStyle          | boolean                   | Removes default styles | false   |

### Theme Properties

| Property | Purpose                | Example Value   |
| -------- | ---------------------- | --------------- |
| dialog   | Main dialog container  | "fixed inset-0" |
| overlay  | Background overlay     | "bg-black/50"   |
| content  | Dialog content wrapper | "bg-white p-4"  |

## Best Practices

1. **Performance**
   * Only import the dialog where needed
   * Consider lazy loading if not immediately required
   * Use the disableAnimation prop on lower-end devices

2. **User Experience**
   * Keep the dialog focused on privacy settings
   * Provide clear save/cancel actions
   * Maintain consistent styling with your application

3. **Accessibility**
   * Test with keyboard navigation
   * Verify screen reader announcements
   * Ensure sufficient color contrast

## Related Components

<Cards>
  <Card icon={<CookieIcon />} title="Cookie Banner" description="The friendly first-touch privacy notice that greets users. Customizable, accessible, and designed to get out of the way." href="/docs/framework/react/cookie-banner" />

  <Card icon={<ToggleRightIcon />} title="Consent Manager Widget" description="The engine that powers granular consent management. Easily embed detailed privacy controls anywhere in your app." href="/docs/framework/react/consent-manager-widget" />
</Cards>


file: ./src/content/framework/react/consent-manager-widget.mdx
meta: {
  "title": "Consent Manager Widget",
  "description": "A flexible, composable widget for building custom privacy consent interfaces. The widget provides granular control over privacy preferences while handling all the compliance requirements for you."
}
        
import { LayersIcon, CookieIcon } from 'lucide-react';
import WidgetExample from '../../../examples/react/widget';

The Consent Manager Widget serves as the core interface for detailed privacy consent management in your application. While the Cookie Banner handles initial consent, this widget enables users to fine-tune their privacy preferences through an intuitive accordion interface.

<WidgetExample />

## Understanding the Widget

Think of the Consent Manager Widget as a highly customizable form that gives users control over their privacy choices. It organizes different types of data collection and processing into collapsible sections, making it easy for users to understand and manage their consent preferences.

For example, a typical widget might include sections for:

* Essential cookies that keep your site running
* Analytics that help improve user experience
* Marketing features that enable personalized content
* Third-party integrations that enhance functionality

The widget automatically handles the complex task of tracking and storing these preferences while maintaining compliance with privacy regulations.

## Quick Start

First, install the package:

```package-install
@c15t/react
```

Then add the widget to your application:

```tsx
import * as ConsentManagerWidget from '@c15t/react/consent-manager-widget'

function PrivacyPreferences() {
  return (
    <ConsentManagerWidget>
      <ConsentManagerWidget.AccordionItems />
      <ConsentManagerWidget.Footer>
        <ConsentManagerWidget.RejectButton>
          Reject All
        </ConsentManagerWidget.RejectButton>
        <ConsentManagerWidget.AcceptAllButton>
          Accept All
        </ConsentManagerWidget.AcceptAllButton>
      </ConsentManagerWidget.Footer>
    </ConsentManagerWidget>
  )
}
```

## Component Architecture

The Consent Manager Widget uses a compound component pattern, which means it's built from smaller, specialized components that work together. This approach gives you complete control over the widget's structure and appearance.

Let's break down the main building blocks:

### Root Component

The `ConsentManagerWidget` serves as the container and context provider for all other components:

```tsx
<ConsentManagerWidget theme={yourTheme}>
  {/* Child components go here */}
</ConsentManagerWidget>
```

### Accordion Interface

The accordion interface organizes privacy preferences into expandable sections:

```tsx
<ConsentManagerWidget>
  <ConsentManagerWidget.Accordion>
    <ConsentManagerWidget.AccordionItems />
  </ConsentManagerWidget.Accordion>
</ConsentManagerWidget>
```

### Custom Accordion Items

You can create custom sections for specific types of consent:

```tsx
<ConsentManagerWidget.Accordion>
  <ConsentManagerWidget.AccordionItem value="analytics">
    <ConsentManagerWidget.AccordionTrigger>
      Analytics Cookies
      <ConsentManagerWidget.AccordionArrow />
    </ConsentManagerWidget.AccordionTrigger>
    <ConsentManagerWidget.AccordionContent>
      <ConsentManagerWidget.Switch name="analytics" />
      We use analytics cookies to understand how you use our website.
    </ConsentManagerWidget.AccordionContent>
  </ConsentManagerWidget.AccordionItem>
</ConsentManagerWidget.Accordion>
```

### Action Buttons

The widget includes several pre-built buttons for common actions:

```tsx
<ConsentManagerWidget.Footer>
  <ConsentManagerWidget.FooterSubGroup>
    <ConsentManagerWidget.RejectButton>
      Reject All
    </ConsentManagerWidget.RejectButton>
    <ConsentManagerWidget.AcceptAllButton>
      Accept All
    </ConsentManagerWidget.AcceptAllButton>
  </ConsentManagerWidget.FooterSubGroup>
  <ConsentManagerWidget.SaveButton>
    Save Preferences
  </ConsentManagerWidget.SaveButton>
</ConsentManagerWidget.Footer>
```

## Customization

The widget supports several ways to customize its appearance and behavior:

### Theme Customization

Apply custom styles using the theme prop:

```tsx
<ConsentManagerWidget
  theme={{
    "widget.root": "",
	  "widget.branding": "",
	  "widget.footer": "",
	  "widget.footer.sub-group": "",
		"widget.footer.reject-button": "",
		"widget.footer.accept-button": "",
		"widget.footer.customize-button": "",
		"widget.footer.save-button": "",
		"widget.accordion": "",
		"widget.accordion.trigger": "",
    "widget.accordion.trigger-inner": "",
		"widget.accordion.item": "",
		"widget.accordion.icon": "",
		"widget.accordion.arrow.open": "",
		"widget.accordion.arrow.close": "",
		"widget.accordion.content": "",
		"widget.accordion.content-inner": "",
		"widget.switch": "",
		"widget.switch.track": "",
		"widget.switch.thumb": "",
  }}
/>
```

### Custom Layouts

Create completely custom layouts while maintaining functionality:

```tsx
<ConsentManagerWidget>
  <YourCustomHeader />
  <ConsentManagerWidget.AccordionItems />
  <YourCustomFooter>
    <ConsentManagerWidget.SaveButton asChild>
      <YourButton variant="primary" />
    </ConsentManagerWidget.SaveButton>
  </YourCustomFooter>
</ConsentManagerWidget>
```

### Branding

Control the visibility of c15t.com branding:

```tsx
<ConsentManagerWidget hideBranding={true} />
```

## Accessibility

The Consent Manager Widget is built with accessibility in mind:

* Proper ARIA attributes for accordion sections
* Keyboard navigation support
* Focus management within the widget
* Screen reader announcements for state changes
* High contrast support for all interactive elements

All these accessibility features work automatically, ensuring all users can effectively manage their privacy preferences.

## API Reference

### Main Component Props

| Prop         | Type                      | Description                           | Default |
| ------------ | ------------------------- | ------------------------------------- | ------- |
| theme        | ConsentManagerWidgetTheme | Theme configuration object            | {}      |
| hideBranding | boolean                   | Controls c15t.com branding visibility | false   |

### Available Sub-components

Each sub-component inherits theme support and provides specific functionality:

| Component      | Purpose                        | Key Props                  |
| -------------- | ------------------------------ | -------------------------- |
| Accordion      | Container for consent options  | type, value, onValueChange |
| AccordionItems | Pre-built consent sections     | -                          |
| Switch         | Toggle for individual consents | name, value, onChange      |
| Footer         | Action button container        | className, children        |
| SaveButton     | Saves current preferences      | onClick, disabled          |

## Integration Examples

### With Custom Components

```tsx
import { Button } from 'your-ui-library'

function CustomConsentManager() {
  return (
    <ConsentManagerWidget>
      <YourHeader>Privacy Preferences</YourHeader>
      <ConsentManagerWidget.AccordionItems />
      <ConsentManagerWidget.Footer>
        <ConsentManagerWidget.SaveButton asChild>
          <Button>Update Preferences</Button>
        </ConsentManagerWidget.SaveButton>
      </ConsentManagerWidget.Footer>
    </ConsentManagerWidget>
  )
}
```

### With Consent Manager Dialog

```tsx
import { ConsentManagerDialog } from '@c15t/react/consent-manager'

function PrivacyCenter() {
  return (
    <ConsentManagerDialog>
      <ConsentManagerWidget theme={dialogTheme} />
    </ConsentManagerDialog>
  )
}
```

## Best Practices

1. Place the widget in a dedicated privacy preferences page or dialog
2. Use clear, concise labels for consent options
3. Maintain consistent styling with your application
4. Test the widget across different screen sizes
5. Ensure all interactive elements are keyboard accessible

## Related Components

<Cards>
  <Card icon={<CookieIcon />} title="Cookie Banner" description="The friendly first-touch privacy notice that greets users. Customizable, accessible, and designed to get out of the way." href="/docs/framework/react/cookie-banner" />

  <Card icon={<LayersIcon />} title="Consent Manager Dialog" description="A detailed privacy preferences interface that lets users fine-tune their choices. Built with accessibility and usability in mind." href="/docs/framework/react/consent-manager-dialog" />
</Cards>


file: ./src/content/framework/react/cookie-banner.mdx
meta: {
  "title": "Cookie Banner",
  "description": "A customizable cookie consent banner that handles privacy compliance with zero configuration required."
}
        
import CookieBannerExample from '../../../examples/react/cookie-banner';
import { LayersIcon, ToggleRightIcon } from 'lucide-react';

The Cookie Banner component provides an elegant way to obtain and manage cookie consent from your users. It handles all the complexity of privacy regulations while providing a smooth user experience that integrates naturally with your application.

<CookieBannerExample />

## Understanding Cookie Consent

Before diving into implementation, let's understand what makes a cookie banner effective. A good cookie banner needs to:

* Inform users about data collection clearly and concisely
* Obtain explicit consent before setting non-essential cookies
* Provide easy ways to accept, reject, or customize preferences
* Remember user choices across sessions
* Meet legal requirements across different jurisdictions

Our Cookie Banner component handles all of these requirements automatically, while remaining fully customizable to match your application's design.

## Quick Start

Let's add a basic cookie banner to your application. First, install the package:

```package-install
@c15t/react
```

Then add the banner to your root component:

```tsx
import {
	ConsentManagerProvider,
	CookieBanner,
} from "@c15t/react";

function App() {
  return (
    <ConsentManagerProvider>
      <YourApp />
      <CookieBanner />
    </ConsentManagerProvider>
  );
}
```

That's it! The banner will automatically:

* Appear on first visit
* Remember user choices
* Handle consent management
* Stay compliant with privacy laws

## Component Architecture

The Cookie Banner uses a compound component pattern, giving you complete control over its structure when needed. Think of it like building blocks – you can use the pre-assembled version, or arrange the pieces yourself for custom layouts.

<Tabs groupId="Version" items={["Recommended", "Expanded"]}>
  <Tab value="Recommended">
    ```tsx
    import { CookieBanner } from "@c15t/react";

    const Banner = () => {
      return (
      	<CookieBanner
      		title="We value your privacy"
      		description="We use cookies to enhance your experience"
      	/>
      );
    };

    ```
  </Tab>

  <Tab value="expanded">
    ```tsx
    import * as CookieBanner from "@c15t/react/cookie-banner";

    const Banner = () => {
    	return (
    		<CookieBanner.Root>
    			<CookieBanner.Card>
    				<CookieBanner.Header>
    					<CookieBanner.Title>Custom Title</CookieBanner.Title>
    					<CookieBanner.Description>Your detailed description here</CookieBanner.Description>
    				</CookieBanner.Header>
    				<CookieBanner.Footer>
    					<CookieBanner.FooterSubGroup>
    						<CookieBanner.RejectButton>Decline All</CookieBanner.RejectButton>
    						<CookieBanner.CustomizeButton>Preferences</CookieBanner.CustomizeButton>
    					</CookieBanner.FooterSubGroup>
    					<CookieBanner.AcceptButton>Accept All</CookieBanner.AcceptButton>
    				</CookieBanner.Footer>
    			</CookieBanner.Card>
    		</CookieBanner.Root>
    	);
    };
    ```
  </Tab>
</Tabs>

## Customization

The Cookie Banner is designed to adapt to your application's visual style. Here are the main ways to customize its appearance:

### Using Themes

Here are the available theme variables:

<AutoTypeTable path="node_modules/@c15t/react/src/components/cookie-banner/index.tsx" name="CookieBannerTheme" />

The theme prop provides a straightforward way to customize the banner's appearance:

```tsx
import { CookieBanner } from "@c15t/react";

const CustomCookieBanner = () => {
  return (
    <CookieBanner
      theme={{
        "banner.root": "",
        "banner.title": "",
        "banner.description": "",
        "banner.footer": "",
        "banner.root": "",
        "banner.card": "",
        "banner.header.root": "",
        "banner.header.title": "",
        "banner.header.description": "",
        "banner.footer": "",
        "banner.footer.sub-group": "",
        "banner.overlay": "",
        "banner.footer.reject-button": "",
        "banner.footer.customize-button": "",
        "banner.footer.accept-button": "",
      }}
    />
  );
};
```

### Using CSS Modules

For more traditional styling approaches, you can use CSS modules:

```tsx
import { CookieBanner } from "@c15t/react";
import styles from "./cookie-banner.module.css";

const CSSModuleCookieBanner = () => {
  return (
    <CookieBanner
      theme={{
        "banner.root": styles.banner,
        "banner.title": styles.title,
        "banner.description": styles.description,
      }}
    />
  );
};
```

### Using Existing Components

You can integrate your own component library using the `asChild` prop:

```tsx
import * as CookieBanner from "@c15t/react/cookie-banner";
import { Button } from "./your-components";

const CustomAcceptButton = () => {
  return (
    <CookieBanner.AcceptButton asChild>
      <Button variant="primary">Accept All Cookies</Button>
    </CookieBanner.AcceptButton>
  );
};
```

## Scroll Locking

The Cookie Banner supports scroll locking, a technique that prevents users from interacting with your website until they've made a cookie consent choice.

```tsx
<CookieBanner 
  lockScroll={true}
/>
```

When enabled, scroll locking:

* Prevents page scrolling and interaction
* Displays a background overlay
* Ensures users must make a privacy choice before accessing content

For best results, use scroll locking together with [focus trapping](#focus-trapping) to ensure complete keyboard accessibility.

<Callout>
  For detailed implementation guides, best practices, and compliance considerations, see our [Scroll Locking Guide](/docs/framework/react/guides/scroll-locking).
</Callout>

## Accessibility

The Cookie Banner is built with accessibility in mind:

* Proper ARIA roles and labels (role="dialog", aria-modal="true")
* Keyboard navigation and interaction support
* Focus management and trapping
* Screen reader announcements
* Semantic HTML structure

These features work automatically, ensuring all users can interact with your privacy controls effectively.

### Focus Trapping

The Cookie Banner implements focus trapping when it's displayed, which is an essential accessibility feature that prevents keyboard focus from moving outside the banner. This behavior:

* **Ensures users complete the consent flow** before interacting with other page elements
* **Prevents accidental interaction** with content that shouldn't be accessible yet
* **Helps compliance** with accessibility guidelines like WCAG 2.4.3 (Focus Order)

#### Implementation Details

Focus trapping in the Cookie Banner works through the `CookieBannerCard` component, which:

1. Uses the [`useFocusTrap`](/docs/framework/react/hooks/use-focus-trap) hook internally
2. Automatically sets `tabIndex={0}` on the container
3. Applies proper ARIA attributes (`role="dialog"` and `aria-modal="true"`)
4. Remembers the previously focused element and restores it when closed
5. Cycles focus between interactive elements when Tab is pressed

You can control focus trapping with the `trapFocus` prop:

```tsx
// Default behavior (recommended)
<CookieBanner trapFocus={true} />

// Disable focus trapping (use with caution)
<CookieBanner trapFocus={false} />
```

<Callout>
  Focus trapping is enabled by default and recommended for accessibility compliance. For more details on implementation and best practices, see our [useFocusTrap hook documentation](/docs/framework/react/hooks/use-focus-trap).
</Callout>

## Best Practices

Follow these guidelines for optimal implementation:

1. Place the banner at the root level of your application
2. Keep the title and description clear and concise
3. Use the pre-assembled version unless you need custom layouts
4. Test the banner across different screen sizes
5. Ensure your theme maintains sufficient contrast ratios
6. Consider [scroll locking](#scroll-locking) for strict compliance scenarios
7. Test with keyboard navigation to ensure accessibility

## Common Pitfalls

## API Reference

### CookieBanner

The main component accepts these props:

<AutoTypeTable path="node_modules/@c15t/react/src/components/cookie-banner/cookie-banner.tsx" name="CookieBannerProps" />

### Compound Components

Each compound component is designed for specific functionality:

| Component                      | Description                  |
| ------------------------------ | ---------------------------- |
| `CookieBanner.Root`            | The container component      |
| `CookieBanner.Card`            | Wrapper for banner content   |
| `CookieBanner.Header`          | Groups title and description |
| `CookieBanner.Footer`          | Contains action buttons      |
| `CookieBanner.AcceptButton`    | Accepts all cookies          |
| `CookieBanner.RejectButton`    | Rejects optional cookies     |
| `CookieBanner.CustomizeButton` | Opens preference dialog      |

## Related Components

<Cards>
  <Card icon={<LayersIcon />} title="Consent Manager Dialog" description="A detailed privacy preferences interface that lets users fine-tune their choices. Built with accessibility and usability in mind." href="/docs/framework/react/consent-manager-dialog" />

  <Card icon={<ToggleRightIcon />} title="Consent Manager Widget" description="The engine that powers granular consent management. Easily embed detailed privacy controls anywhere in your app." href="/docs/framework/react/consent-manager-widget" />
</Cards>


file: ./src/content/framework/react/dev-tool.mdx
meta: {
  "title": "Dev Tool",
  "description": "Monitor and debug your privacy consent management with our development tools, designed to help you build with confidence."
}
        
Development tools provide real-time insight into how users interact with your privacy consent management system. With live state monitoring, intuitive debugging features, and customizable visualization options, you can ensure your privacy implementation works exactly as intended.

## Understanding Dev Tools

When building privacy-compliant applications, you need visibility into how consent is being managed. Our dev tools let you:

* Watch consent changes in real-time as users interact with your privacy controls
* Inspect the complete consent state at any point in time
* Debug issues by tracking consent management flow
* Validate that your privacy implementation works correctly

Think of it like having a privacy-focused browser dev tools panel - but specifically designed for consent management.

## Adding Dev Tools to Your Project

First, install the development tools package:

```package-install
@c15t/dev-tools
```

Then add the development tools to your application:

```tsx
import { C15TDevTools } from '@c15t/dev-tools';

function App() {
  return (
    <>
      <YourApp />
      {process.env.NODE_ENV === 'development' && <C15TDevTools />}
    </>
  )
}
```

The dev tools will automatically appear in your application during development. They're designed to be unobtrusive while still providing quick access to important information.

## API Reference

### PrivacyDevTools

The main development tools component accepts these props:

<AutoTypeTable path="node_modules/@c15t/dev-tools/src/dev-tool.tsx" name="ConsentManagerProviderProps" />

## Development Best Practices

To get the most out of the development tools:

1. Keep dev tools enabled during development and testing
   * They help catch issues early
   * Make debugging more efficient
   * Provide insights into user behavior

2. Use the inspection APIs to validate consent handling
   * Verify consents are saved correctly
   * Check that preferences persist properly
   * Ensure privacy choices are respected

3. Monitor consent flow during testing
   * Track the user journey through consent management
   * Identify potential UX improvements
   * Validate compliance requirements

4. Remove dev tools in production
   ```tsx
   // Automatically removed in production builds
   {process.env.NODE_ENV === 'development' && <C15TDevTools />}
   ```

## Security Considerations

When using the development tools, keep in mind:

* Dev tools may expose sensitive user preferences
* Always remove dev tools before deploying to production
* Be cautious when logging consent state
* Consider privacy implications when sharing debug information

## Troubleshooting Common Issues

If you encounter problems:

1. Verify the dev tools are only running in development
2. Check that your privacy components are properly initialized
3. Ensure the consent state namespace matches your configuration
4. Look for error messages in the browser console

Remember, the development tools are here to help you build better privacy experiences. Use them to understand, debug, and improve your consent management implementation.


file: ./src/content/framework/react/index.mdx
meta: {
  "title": "Getting Started",
  "description": "Build privacy-first applications with zero legal overhead. Our plug-and-play components handle compliance so you can focus on your product."
}
        
import CookieBannerExample from '../../../examples/react/cookie-banner';
import { HomeIcon, CodeIcon, LanguagesIcon, CookieIcon, LayersIcon, ToggleRightIcon } from 'lucide-react';

<CookieBannerExample />

## Why @c15t/react?

Building privacy-compliant interfaces isn't just about showing a cookie banner - it's about managing user consent, respecting privacy choices, and maintaining detailed records. We've packaged all of this complexity into simple, customizable components that:

* **Just work out of the box** - Drop our components in and get instant privacy compliance
* **Look and feel native** - Seamlessly match your application's design
* **Handle the legal stuff** - Built-in support for GDPR, CCPA, and other privacy regulations
* **Manage consent automatically** - Smart state management that remembers user preferences
* **Stay up to date** - Automatic updates when regulations change

## Getting Started

<Steps>
  <Step>
    ### Install the package:

    ```package-install
    @c15t/react
    ```
  </Step>

  <Step>
    ### Add the privacy banner to your app:

    ```tsx title="app.tsx"
    import {
    	ConsentManagerDialog,
    	ConsentManagerProvider,
    	CookieBanner,
    } from "@c15t/react";

    function App() {
      return (
        <ConsentManagerProvider>
          <YourApp />
          <CookieBanner />
          <ConsentManagerDialog />
        </ConsentManagerProvider>
      )
    }
    ```
  </Step>

  <Step>
    ### That's it! You now have a fully compliant privacy system.
  </Step>
</Steps>

## Core Components

<Cards>
  <Card icon={<CookieIcon />} title="Cookie Banner" description="The friendly first-touch privacy notice that greets users. Customizable, accessible, and designed to get out of the way." href="/docs/framework/react/cookie-banner" />

  <Card icon={<LayersIcon />} title="Consent Manager Dialog" description="A detailed privacy preferences interface that lets users fine-tune their choices. Built with accessibility and usability in mind." href="/docs/framework/react/consent-manager-dialog" />

  <Card icon={<ToggleRightIcon />} title="Consent Manager Widget" description="The engine that powers granular consent management. Easily embed detailed privacy controls anywhere in your app." href="/docs/framework/react/consent-manager-widget" />

  <Card icon={<CodeIcon />} title="Dev Tools" description="A tool to help you manage your privacy consent state." href="/docs/framework/react/dev-tools" />
</Cards>

## Guides

<Cards>
  <Card icon={<HomeIcon />} title="Customization" description="Customize the c15t components to match your brand" href="/docs/framework/react/customization" />

  <Card icon={<LanguagesIcon />} title="Internationalization" description="Translate the c15t components into any language" href="/docs/framework/react/guides/translation" />
</Cards>


file: ./src/content/getting-started/open-source/contributing.mdx
meta: {
  "title": "Contributing to c15t.com"
}
        
We love your input! We want to make contributing to c15t.com as easy and transparent as possible, whether it's:

* Reporting a bug
* Discussing the current state of the code
* Submitting a fix
* Proposing new features
* Becoming a maintainer

## 📜 License

By contributing to Consent Management (c15t), you agree that your contributions will be licensed under the GNU General Public License v3.0 (GPL-3.0). This is a copyleft license that ensures the software and all derivatives remain free and open source.

[Read the full license here](/docs/getting-started/open-source/license)

## 🏠 House Rules

### Before You Start

* Check existing [issues](https://github.com/c15t/c15t/issues) and [PRs](https://github.com/c15t/c15t/pulls) first
* **Always create an issue before starting development**
* Follow our PR template carefully

### Issue Approval Process

We use the `needs-approval` label to manage contributions:

#### For Contributors

* 🚫 **Needs Approval First:**
  * New features
  * Large-scale refactoring
  * Architecture changes
  * *Wait for a c15t.com team member to remove the `needs-approval` label*

* ✅ **Can Start Immediately:**
  * Bug fixes
  * Documentation updates
  * Performance improvements
  * Security fixes
  * Tests

## Development Process

We use GitHub to host code, to track issues and feature requests, as well as accept pull requests.

### 🤖 Automated Workflows

We leverage several automated workflows to ensure code quality:

1. **Code Quality**
   * Formatting: Biome automatically formats code
   * Types: TypeScript checks run on every PR
   * Tests: Vitest runs the test suite
   * Build: Turbo ensures everything builds correctly

2. **Dependencies**
   * Renovate keeps dependencies up to date
   * PNPM manages our packages
   * Changesets handles our versioning

3. **Pull Requests**
   * PR titles are checked for semantic versioning
   * Automated code review for common issues
   * Required checks must pass before merging

## Getting Started

1. Fork the repo and create your branch from `main`:

   ```sh
   git clone https://github.com/your-username/c15t.git
   cd c15t
   git switch -c my-feature
   ```

2. Install dependencies:

   ```sh
   corepack enable  # Sets up PNPM
   pnpm install     # Installs dependencies
   ```

3. Make your changes and ensure the following pass:

   ```sh
   pnpm fmt         # Format code
   pnpm test        # Run tests
   pnpm build       # Build packages
   ```

## Pull Request Process

1. **Create an Issue First**
   * For features/refactoring: Wait for approval (needs-approval label)
   * For bugs/docs: Can start work immediately

2. **Make Your Changes**
   * Follow our coding standards (enforced by Biome)
   * Add tests for new functionality
   * Update documentation as needed

3. **Create Pull Request**
   * Use our PR template
   * Link the related issue
   * Add screenshots for UI changes
   * Describe your changes clearly

4. **Automated Checks**
   The following will run automatically:
   * Code formatting (Biome)
   * Type checking (TypeScript)
   * Tests (Vitest)
   * Build verification (Turbo)
   * Dependency checks (Renovate)
   * PR title format
   * Issue linking

5. **Review Process**
   * Maintainers will review your code
   * Address any requested changes
   * Once approved, it will be merged

## Release Process

Releases are automated through our CI/CD pipeline:

1. Merge to `main` triggers version check
2. Changesets determines version bump
3. New version is published to npm
4. GitHub release is created
5. Documentation is updated

## Development Guidelines

### Code Style

We use Biome for formatting and linting. Configuration is in `biome.jsonc`.

### Commits

Follow [Conventional Commits](https://www.conventionalcommits.org/):

* `feat:` New features
* `fix:` Bug fixes
* `docs:` Documentation
* `chore:` Maintenance
* `refactor:` Code changes
* `test:` Test changes

### Testing

* Write tests for new features
* Update tests for changes
* Run `pnpm test` locally

### Documentation

* Update docs with new features
* Include code examples
* Update README if needed

## Questions?

Don't hesitate to:

* Open an issue
* Start a discussion
* Ask in comments

## Important License Note

c15t.com is licensed under the GNU General Public License v3.0 (GPL-3.0). By contributing to this project, you agree to license your contributions under the same license. This means:

* ✅ You can use the code commercially
* ✅ You can modify the code
* ✅ You can distribute the code
* ✅ You can use the code privately
* ✅ You can use the code for patent purposes

But you must:

* 📢 Disclose source
* 📄 Include original license
* 📝 State changes
* 🔄 Use same license
* 📋 Include copyright notice

[Learn more about GPL-3.0](https://choosealicense.com/licenses/gpl-3.0/)


file: ./src/content/getting-started/open-source/license.mdx
meta: {
  "title": "Licence"
}
        
c15t.com is licensed under the GNU General Public License v3.0 (GPL-3.0). By contributing to this project, you agree to license your contributions under the same license. This means:

* ✅ You can use the code commercially
* ✅ You can modify the code
* ✅ You can distribute the code
* ✅ You can use the code privately

But you must:

* 📢 Disclose source
* 📄 Include original license
* 📝 State changes
* 🔄 Use same license
* 📋 Include copyright notice

***

## Full License

*Version 3, 29 June 2007*\
*Copyright © 2007 Free Software Foundation, Inc. [fsf.org](http://fsf.org/)*

Everyone is permitted to copy and distribute verbatim copies of this license
document, but changing it is not allowed.

## Preamble

The GNU General Public License is a free, copyleft license for software and other
kinds of works.

The licenses for most software and other practical works are designed to take away
your freedom to share and change the works. By contrast, the GNU General Public
License is intended to guarantee your freedom to share and change all versions of a
program--to make sure it remains free software for all its users. We, the Free
Software Foundation, use the GNU General Public License for most of our software; it
applies also to any other work released this way by its authors. You can apply it to
your programs, too.

When we speak of free software, we are referring to freedom, not price. Our General
Public Licenses are designed to make sure that you have the freedom to distribute
copies of free software (and charge for them if you wish), that you receive source
code or can get it if you want it, that you can change the software or use pieces of
it in new free programs, and that you know you can do these things.

To protect your rights, we need to prevent others from denying you these rights or
asking you to surrender the rights. Therefore, you have certain responsibilities if
you distribute copies of the software, or if you modify it: responsibilities to
respect the freedom of others.

For example, if you distribute copies of such a program, whether gratis or for a fee,
you must pass on to the recipients the same freedoms that you received. You must make
sure that they, too, receive or can get the source code. And you must show them these
terms so they know their rights.

Developers that use the GNU GPL protect your rights with two steps: **(1)** assert
copyright on the software, and **(2)** offer you this License giving you legal permission
to copy, distribute and/or modify it.

For the developers' and authors' protection, the GPL clearly explains that there is
no warranty for this free software. For both users' and authors' sake, the GPL
requires that modified versions be marked as changed, so that their problems will not
be attributed erroneously to authors of previous versions.

Some devices are designed to deny users access to install or run modified versions of
the software inside them, although the manufacturer can do so. This is fundamentally
incompatible with the aim of protecting users' freedom to change the software. The
systematic pattern of such abuse occurs in the area of products for individuals to
use, which is precisely where it is most unacceptable. Therefore, we have designed
this version of the GPL to prohibit the practice for those products. If such problems
arise substantially in other domains, we stand ready to extend this provision to
those domains in future versions of the GPL, as needed to protect the freedom of
users.

Finally, every program is threatened constantly by software patents. States should
not allow patents to restrict development and use of software on general-purpose
computers, but in those that do, we wish to avoid the special danger that patents
applied to a free program could make it effectively proprietary. To prevent this, the
GPL assures that patents cannot be used to render the program non-free.

The precise terms and conditions for copying, distribution and modification follow.

## TERMS AND CONDITIONS

### 0. Definitions

"This License" refers to version 3 of the GNU General Public License.

"Copyright" also means copyright-like laws that apply to other kinds of
works, such as semiconductor masks.

"The Program" refers to any copyrightable work licensed under this
License. Each licensee is addressed as "you". "Licensees" and
"recipients" may be individuals or organizations.

To "modify" a work means to copy from or adapt all or part of the work in
a fashion requiring copyright permission, other than the making of an exact copy. The
resulting work is called a "modified version" of the earlier work or a
work "based on" the earlier work.

A "covered work" means either the unmodified Program or a work based on
the Program.

To "propagate" a work means to do anything with it that, without
permission, would make you directly or secondarily liable for infringement under
applicable copyright law, except executing it on a computer or modifying a private
copy. Propagation includes copying, distribution (with or without modification),
making available to the public, and in some countries other activities as well.

To "convey" a work means any kind of propagation that enables other
parties to make or receive copies. Mere interaction with a user through a computer
network, with no transfer of a copy, is not conveying.

An interactive user interface displays "Appropriate Legal Notices" to the
extent that it includes a convenient and prominently visible feature that **(1)**
displays an appropriate copyright notice, and **(2)** tells the user that there is no
warranty for the work (except to the extent that warranties are provided), that
licensees may convey the work under this License, and how to view a copy of this
License. If the interface presents a list of user commands or options, such as a
menu, a prominent item in the list meets this criterion.

### 1. Source Code

The "source code" for a work means the preferred form of the work for
making modifications to it. "Object code" means any non-source form of a
work.

A "Standard Interface" means an interface that either is an official
standard defined by a recognized standards body, or, in the case of interfaces
specified for a particular programming language, one that is widely used among
developers working in that language.

The "System Libraries" of an executable work include anything, other than
the work as a whole, that **(a)** is included in the normal form of packaging a Major
Component, but which is not part of that Major Component, and **(b)** serves only to
enable use of the work with that Major Component, or to implement a Standard
Interface for which an implementation is available to the public in source code form.
A "Major Component", in this context, means a major essential component
(kernel, window system, and so on) of the specific operating system (if any) on which
the executable work runs, or a compiler used to produce the work, or an object code
interpreter used to run it.

The "Corresponding Source" for a work in object code form means all the
source code needed to generate, install, and (for an executable work) run the object
code and to modify the work, including scripts to control those activities. However,
it does not include the work's System Libraries, or general-purpose tools or
generally available free programs which are used unmodified in performing those
activities but which are not part of the work. For example, Corresponding Source
includes interface definition files associated with source files for the work, and
the source code for shared libraries and dynamically linked subprograms that the work
is specifically designed to require, such as by intimate data communication or
control flow between those subprograms and other parts of the work.

The Corresponding Source need not include anything that users can regenerate
automatically from other parts of the Corresponding Source.

The Corresponding Source for a work in source code form is that same work.

### 2. Basic Permissions

All rights granted under this License are granted for the term of copyright on the
Program, and are irrevocable provided the stated conditions are met. This License
explicitly affirms your unlimited permission to run the unmodified Program. The
output from running a covered work is covered by this License only if the output,
given its content, constitutes a covered work. This License acknowledges your rights
of fair use or other equivalent, as provided by copyright law.

You may make, run and propagate covered works that you do not convey, without
conditions so long as your license otherwise remains in force. You may convey covered
works to others for the sole purpose of having them make modifications exclusively
for you, or provide you with facilities for running those works, provided that you
comply with the terms of this License in conveying all material for which you do not
control copyright. Those thus making or running the covered works for you must do so
exclusively on your behalf, under your direction and control, on terms that prohibit
them from making any copies of your copyrighted material outside their relationship
with you.

Conveying under any other circumstances is permitted solely under the conditions
stated below. Sublicensing is not allowed; section 10 makes it unnecessary.

### 3. Protecting Users' Legal Rights From Anti-Circumvention Law

No covered work shall be deemed part of an effective technological measure under any
applicable law fulfilling obligations under article 11 of the WIPO copyright treaty
adopted on 20 December 1996, or similar laws prohibiting or restricting circumvention
of such measures.

When you convey a covered work, you waive any legal power to forbid circumvention of
technological measures to the extent such circumvention is effected by exercising
rights under this License with respect to the covered work, and you disclaim any
intention to limit operation or modification of the work as a means of enforcing,
against the work's users, your or third parties' legal rights to forbid circumvention
of technological measures.

### 4. Conveying Verbatim Copies

You may convey verbatim copies of the Program's source code as you receive it, in any
medium, provided that you conspicuously and appropriately publish on each copy an
appropriate copyright notice; keep intact all notices stating that this License and
any non-permissive terms added in accord with section 7 apply to the code; keep
intact all notices of the absence of any warranty; and give all recipients a copy of
this License along with the Program.

You may charge any price or no price for each copy that you convey, and you may offer
support or warranty protection for a fee.

### 5. Conveying Modified Source Versions

You may convey a work based on the Program, or the modifications to produce it from
the Program, in the form of source code under the terms of section 4, provided that
you also meet all of these conditions:

* **a)** The work must carry prominent notices stating that you modified it, and giving a
  relevant date.
* **b)** The work must carry prominent notices stating that it is released under this
  License and any conditions added under section 7. This requirement modifies the
  requirement in section 4 to "keep intact all notices".
* **c)** You must license the entire work, as a whole, under this License to anyone who
  comes into possession of a copy. This License will therefore apply, along with any
  applicable section 7 additional terms, to the whole of the work, and all its parts,
  regardless of how they are packaged. This License gives no permission to license the
  work in any other way, but it does not invalidate such permission if you have
  separately received it.
* **d)** If the work has interactive user interfaces, each must display Appropriate Legal
  Notices; however, if the Program has interactive interfaces that do not display
  Appropriate Legal Notices, your work need not make them do so.

A compilation of a covered work with other separate and independent works, which are
not by their nature extensions of the covered work, and which are not combined with
it such as to form a larger program, in or on a volume of a storage or distribution
medium, is called an "aggregate" if the compilation and its resulting
copyright are not used to limit the access or legal rights of the compilation's users
beyond what the individual works permit. Inclusion of a covered work in an aggregate
does not cause this License to apply to the other parts of the aggregate.

### 6. Conveying Non-Source Forms

You may convey a covered work in object code form under the terms of sections 4 and
5, provided that you also convey the machine-readable Corresponding Source under the
terms of this License, in one of these ways:

* **a)** Convey the object code in, or embodied in, a physical product (including a
  physical distribution medium), accompanied by the Corresponding Source fixed on a
  durable physical medium customarily used for software interchange.
* **b)** Convey the object code in, or embodied in, a physical product (including a
  physical distribution medium), accompanied by a written offer, valid for at least
  three years and valid for as long as you offer spare parts or customer support for
  that product model, to give anyone who possesses the object code either **(1)** a copy of
  the Corresponding Source for all the software in the product that is covered by this
  License, on a durable physical medium customarily used for software interchange, for
  a price no more than your reasonable cost of physically performing this conveying of
  source, or **(2)** access to copy the Corresponding Source from a network server at no
  charge.
* **c)** Convey individual copies of the object code with a copy of the written offer to
  provide the Corresponding Source. This alternative is allowed only occasionally and
  noncommercially, and only if you received the object code with such an offer, in
  accord with subsection 6b.
* **d)** Convey the object code by offering access from a designated place (gratis or for
  a charge), and offer equivalent access to the Corresponding Source in the same way
  through the same place at no further charge. You need not require recipients to copy
  the Corresponding Source along with the object code. If the place to copy the object
  code is a network server, the Corresponding Source may be on a different server
  (operated by you or a third party) that supports equivalent copying facilities,
  provided you maintain clear directions next to the object code saying where to find
  the Corresponding Source. Regardless of what server hosts the Corresponding Source,
  you remain obligated to ensure that it is available for as long as needed to satisfy
  these requirements.
* **e)** Convey the object code using peer-to-peer transmission, provided you inform
  other peers where the object code and Corresponding Source of the work are being
  offered to the general public at no charge under subsection 6d.

A separable portion of the object code, whose source code is excluded from the
Corresponding Source as a System Library, need not be included in conveying the
object code work.

A "User Product" is either **(1)** a "consumer product", which
means any tangible personal property which is normally used for personal, family, or
household purposes, or **(2)** anything designed or sold for incorporation into a
dwelling. In determining whether a product is a consumer product, doubtful cases
shall be resolved in favor of coverage. For a particular product received by a
particular user, "normally used" refers to a typical or common use of
that class of product, regardless of the status of the particular user or of the way
in which the particular user actually uses, or expects or is expected to use, the
product. A product is a consumer product regardless of whether the product has
substantial commercial, industrial or non-consumer uses, unless such uses represent
the only significant mode of use of the product.

"Installation Information" for a User Product means any methods,
procedures, authorization keys, or other information required to install and execute
modified versions of a covered work in that User Product from a modified version of
its Corresponding Source. The information must suffice to ensure that the continued
functioning of the modified object code is in no case prevented or interfered with
solely because modification has been made.

If you convey an object code work under this section in, or with, or specifically for
use in, a User Product, and the conveying occurs as part of a transaction in which
the right of possession and use of the User Product is transferred to the recipient
in perpetuity or for a fixed term (regardless of how the transaction is
characterized), the Corresponding Source conveyed under this section must be
accompanied by the Installation Information. But this requirement does not apply if
neither you nor any third party retains the ability to install modified object code
on the User Product (for example, the work has been installed in ROM).

The requirement to provide Installation Information does not include a requirement to
continue to provide support service, warranty, or updates for a work that has been
modified or installed by the recipient, or for the User Product in which it has been
modified or installed. Access to a network may be denied when the modification itself
materially and adversely affects the operation of the network or violates the rules
and protocols for communication across the network.

Corresponding Source conveyed, and Installation Information provided, in accord with
this section must be in a format that is publicly documented (and with an
implementation available to the public in source code form), and must require no
special password or key for unpacking, reading or copying.

### 7. Additional Terms

"Additional permissions" are terms that supplement the terms of this
License by making exceptions from one or more of its conditions. Additional
permissions that are applicable to the entire Program shall be treated as though they
were included in this License, to the extent that they are valid under applicable
law. If additional permissions apply only to part of the Program, that part may be
used separately under those permissions, but the entire Program remains governed by
this License without regard to the additional permissions.

When you convey a copy of a covered work, you may at your option remove any
additional permissions from that copy, or from any part of it. (Additional
permissions may be written to require their own removal in certain cases when you
modify the work.) You may place additional permissions on material, added by you to a
covered work, for which you have or can give appropriate copyright permission.

Notwithstanding any other provision of this License, for material you add to a
covered work, you may (if authorized by the copyright holders of that material)
supplement the terms of this License with terms:

* **a)** Disclaiming warranty or limiting liability differently from the terms of
  sections 15 and 16 of this License; or
* **b)** Requiring preservation of specified reasonable legal notices or author
  attributions in that material or in the Appropriate Legal Notices displayed by works
  containing it; or
* **c)** Prohibiting misrepresentation of the origin of that material, or requiring that
  modified versions of such material be marked in reasonable ways as different from the
  original version; or
* **d)** Limiting the use for publicity purposes of names of licensors or authors of the
  material; or
* **e)** Declining to grant rights under trademark law for use of some trade names,
  trademarks, or service marks; or
* **f)** Requiring indemnification of licensors and authors of that material by anyone
  who conveys the material (or modified versions of it) with contractual assumptions of
  liability to the recipient, for any liability that these contractual assumptions
  directly impose on those licensors and authors.

All other non-permissive additional terms are considered "further
restrictions" within the meaning of section 10. If the Program as you received
it, or any part of it, contains a notice stating that it is governed by this License
along with a term that is a further restriction, you may remove that term. If a
license document contains a further restriction but permits relicensing or conveying
under this License, you may add to a covered work material governed by the terms of
that license document, provided that the further restriction does not survive such
relicensing or conveying.

If you add terms to a covered work in accord with this section, you must place, in
the relevant source files, a statement of the additional terms that apply to those
files, or a notice indicating where to find the applicable terms.

Additional terms, permissive or non-permissive, may be stated in the form of a
separately written license, or stated as exceptions; the above requirements apply
either way.

### 8. Termination

You may not propagate or modify a covered work except as expressly provided under
this License. Any attempt otherwise to propagate or modify it is void, and will
automatically terminate your rights under this License (including any patent licenses
granted under the third paragraph of section 11).

However, if you cease all violation of this License, then your license from a
particular copyright holder is reinstated **(a)** provisionally, unless and until the
copyright holder explicitly and finally terminates your license, and **(b)** permanently,
if the copyright holder fails to notify you of the violation by some reasonable means
prior to 60 days after the cessation.

Moreover, your license from a particular copyright holder is reinstated permanently
if the copyright holder notifies you of the violation by some reasonable means, this
is the first time you have received notice of violation of this License (for any
work) from that copyright holder, and you cure the violation prior to 30 days after
your receipt of the notice.

Termination of your rights under this section does not terminate the licenses of
parties who have received copies or rights from you under this License. If your
rights have been terminated and not permanently reinstated, you do not qualify to
receive new licenses for the same material under section 10.

### 9. Acceptance Not Required for Having Copies

You are not required to accept this License in order to receive or run a copy of the
Program. Ancillary propagation of a covered work occurring solely as a consequence of
using peer-to-peer transmission to receive a copy likewise does not require
acceptance. However, nothing other than this License grants you permission to
propagate or modify any covered work. These actions infringe copyright if you do not
accept this License. Therefore, by modifying or propagating a covered work, you
indicate your acceptance of this License to do so.

### 10. Automatic Licensing of Downstream Recipients

Each time you convey a covered work, the recipient automatically receives a license
from the original licensors, to run, modify and propagate that work, subject to this
License. You are not responsible for enforcing compliance by third parties with this
License.

An "entity transaction" is a transaction transferring control of an
organization, or substantially all assets of one, or subdividing an organization, or
merging organizations. If propagation of a covered work results from an entity
transaction, each party to that transaction who receives a copy of the work also
receives whatever licenses to the work the party's predecessor in interest had or
could give under the previous paragraph, plus a right to possession of the
Corresponding Source of the work from the predecessor in interest, if the predecessor
has it or can get it with reasonable efforts.

You may not impose any further restrictions on the exercise of the rights granted or
affirmed under this License. For example, you may not impose a license fee, royalty,
or other charge for exercise of rights granted under this License, and you may not
initiate litigation (including a cross-claim or counterclaim in a lawsuit) alleging
that any patent claim is infringed by making, using, selling, offering for sale, or
importing the Program or any portion of it.

### 11. Patents

A "contributor" is a copyright holder who authorizes use under this
License of the Program or a work on which the Program is based. The work thus
licensed is called the contributor's "contributor version".

A contributor's "essential patent claims" are all patent claims owned or
controlled by the contributor, whether already acquired or hereafter acquired, that
would be infringed by some manner, permitted by this License, of making, using, or
selling its contributor version, but do not include claims that would be infringed
only as a consequence of further modification of the contributor version. For
purposes of this definition, "control" includes the right to grant patent
sublicenses in a manner consistent with the requirements of this License.

Each contributor grants you a non-exclusive, worldwide, royalty-free patent license
under the contributor's essential patent claims, to make, use, sell, offer for sale,
import and otherwise run, modify and propagate the contents of its contributor
version.

In the following three paragraphs, a "patent license" is any express
agreement or commitment, however denominated, not to enforce a patent (such as an
express permission to practice a patent or covenant not to sue for patent
infringement). To "grant" such a patent license to a party means to make
such an agreement or commitment not to enforce a patent against the party.

If you convey a covered work, knowingly relying on a patent license, and the
Corresponding Source of the work is not available for anyone to copy, free of charge
and under the terms of this License, through a publicly available network server or
other readily accessible means, then you must either **(1)** cause the Corresponding
Source to be so available, or **(2)** arrange to deprive yourself of the benefit of the
patent license for this particular work, or **(3)** arrange, in a manner consistent with
the requirements of this License, to extend the patent license to downstream
recipients. "Knowingly relying" means you have actual knowledge that, but
for the patent license, your conveying the covered work in a country, or your
recipient's use of the covered work in a country, would infringe one or more
identifiable patents in that country that you have reason to believe are valid.

If, pursuant to or in connection with a single transaction or arrangement, you
convey, or propagate by procuring conveyance of, a covered work, and grant a patent
license to some of the parties receiving the covered work authorizing them to use,
propagate, modify or convey a specific copy of the covered work, then the patent
license you grant is automatically extended to all recipients of the covered work and
works based on it.

A patent license is "discriminatory" if it does not include within the
scope of its coverage, prohibits the exercise of, or is conditioned on the
non-exercise of one or more of the rights that are specifically granted under this
License. You may not convey a covered work if you are a party to an arrangement with
a third party that is in the business of distributing software, under which you make
payment to the third party based on the extent of your activity of conveying the
work, and under which the third party grants, to any of the parties who would receive
the covered work from you, a discriminatory patent license **(a)** in connection with
copies of the covered work conveyed by you (or copies made from those copies), or **(b)**
primarily for and in connection with specific products or compilations that contain
the covered work, unless you entered into that arrangement, or that patent license
was granted, prior to 28 March 2007.

Nothing in this License shall be construed as excluding or limiting any implied
license or other defenses to infringement that may otherwise be available to you
under applicable patent law.

### 12. No Surrender of Others' Freedom

If conditions are imposed on you (whether by court order, agreement or otherwise)
that contradict the conditions of this License, they do not excuse you from the
conditions of this License. If you cannot convey a covered work so as to satisfy
simultaneously your obligations under this License and any other pertinent
obligations, then as a consequence you may not convey it at all. For example, if you
agree to terms that obligate you to collect a royalty for further conveying from
those to whom you convey the Program, the only way you could satisfy both those terms
and this License would be to refrain entirely from conveying the Program.

### 13. Use with the GNU Affero General Public License

Notwithstanding any other provision of this License, you have permission to link or
combine any covered work with a work licensed under version 3 of the GNU Affero
General Public License into a single combined work, and to convey the resulting work.
The terms of this License will continue to apply to the part which is the covered
work, but the special requirements of the GNU Affero General Public License, section
13, concerning interaction through a network will apply to the combination as such.

### 14. Revised Versions of this License

The Free Software Foundation may publish revised and/or new versions of the GNU
General Public License from time to time. Such new versions will be similar in spirit
to the present version, but may differ in detail to address new problems or concerns.

Each version is given a distinguishing version number. If the Program specifies that
a certain numbered version of the GNU General Public License "or any later
version" applies to it, you have the option of following the terms and
conditions either of that numbered version or of any later version published by the
Free Software Foundation. If the Program does not specify a version number of the GNU
General Public License, you may choose any version ever published by the Free
Software Foundation.

If the Program specifies that a proxy can decide which future versions of the GNU
General Public License can be used, that proxy's public statement of acceptance of a
version permanently authorizes you to choose that version for the Program.

Later license versions may give you additional or different permissions. However, no
additional obligations are imposed on any author or copyright holder as a result of
your choosing to follow a later version.

### 15. Disclaimer of Warranty

THERE IS NO WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY APPLICABLE LAW.
EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT HOLDERS AND/OR OTHER PARTIES
PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY OF ANY KIND, EITHER
EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE. THE ENTIRE RISK AS TO THE
QUALITY AND PERFORMANCE OF THE PROGRAM IS WITH YOU. SHOULD THE PROGRAM PROVE
DEFECTIVE, YOU ASSUME THE COST OF ALL NECESSARY SERVICING, REPAIR OR CORRECTION.

### 16. Limitation of Liability

IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING WILL ANY
COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MODIFIES AND/OR CONVEYS THE PROGRAM AS
PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, INCLUDING ANY GENERAL, SPECIAL,
INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING OUT OF THE USE OR INABILITY TO USE THE
PROGRAM (INCLUDING BUT NOT LIMITED TO LOSS OF DATA OR DATA BEING RENDERED INACCURATE
OR LOSSES SUSTAINED BY YOU OR THIRD PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE
WITH ANY OTHER PROGRAMS), EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE
POSSIBILITY OF SUCH DAMAGES.

### 17. Interpretation of Sections 15 and 16

If the disclaimer of warranty and limitation of liability provided above cannot be
given local legal effect according to their terms, reviewing courts shall apply local
law that most closely approximates an absolute waiver of all civil liability in
connection with the Program, unless a warranty or assumption of liability accompanies
a copy of the Program in return for a fee.

*END OF TERMS AND CONDITIONS*

## How to Apply These Terms to Your New Programs

If you develop a new program, and you want it to be of the greatest possible use to
the public, the best way to achieve this is to make it free software which everyone
can redistribute and change under these terms.

To do so, attach the following notices to the program. It is safest to attach them
to the start of each source file to most effectively state the exclusion of warranty;
and each file should have at least the "copyright" line and a pointer to
where the full notice is found.

{`<program>`}  Copyright (C) {`<year>`}  {`<name of author>`}

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with this program.  If not, see [http://www.gnu.org/licenses/](http://www.gnu.org/licenses/).

Also add information on how to contact you by electronic and paper mail.

If the program does terminal interaction, make it output a short notice like this
when it starts in an interactive mode:

{`<program>`}  Copyright (C) {`<year>`}  {`<name of author>`}
This program comes with ABSOLUTELY NO WARRANTY; for details type 'show w'.
This is free software, and you are welcome to redistribute it
under certain conditions; type 'show c' for details.

The hypothetical commands `show w` and `show c` should show the appropriate parts of
the General Public License. Of course, your program's commands might be different;
for a GUI interface, you would use an "about box".

You should also get your employer (if you work as a programmer) or school, if any, to
sign a "copyright disclaimer" for the program, if necessary. For more
information on this, and how to apply and follow the GNU GPL, see
[http://www.gnu.org/licenses/](http://www.gnu.org/licenses/).

The GNU General Public License does not permit incorporating your program into
proprietary programs. If your program is a subroutine library, you may consider it
more useful to permit linking proprietary applications with the library. If this is
what you want to do, use the GNU Lesser General Public License instead of this
License. But first, please read
[http://www.gnu.org/philosophy/why-not-lgpl.html](http://www.gnu.org/philosophy/why-not-lgpl.html).


file: ./src/content/getting-started/open-source/why-open-source.mdx
meta: {
  "title": "Building Privacy Tools in the Open",
  "description": "We believe great developer tools should be built in the open, with transparency and community collaboration at their core. This philosophy guides how we're building modern privacy infrastructure."
}
        
## Open Source Foundation

Consent Management (c15t) is built with a strong open source foundation:

* **Core Platform**: GNU3 licensed, ensuring your privacy tools remain free and open
* **UI Components**: Built on shadcn/ui, giving you complete customization control
* **Server Components**: Full Next.js app directory support for modern applications
* **Cloud Platform**: Optional managed service coming soon (while keeping core open source)

## Why We Chose Open Source

Privacy infrastructure should be:

1. **Transparent**
   * See exactly how user consent is managed
   * Audit the code handling sensitive data
   * Understand the complete data flow

2. **Community-Driven**
   * Benefit from collective expertise
   * Shape the future of privacy tools
   * Share best practices globally

3. **Trustworthy**
   * No black boxes in privacy management
   * Full visibility into data handling
   * Community-verified security

4. **Flexible**
   * Self-host for complete control
   * Customize to your exact needs
   * Integrate with your existing stack

## Following Giants

We're inspired by transformative developer platforms:

* **Vercel**: Revolutionized deployment workflows
* **Clerk**: Simplified authentication
* **Resend**: Modernized email infrastructure
* **Unkey**: Streamlined API key management

Just as these platforms brought developer experience to the forefront, we're bringing that same level of excellence and simplicity to privacy management.

## Our Commitment

By choosing open source, we commit to:

* **Transparency**: All core code is public and auditable
* **Community**: Decisions made with community input
* **Quality**: Enterprise-grade while remaining open
* **Longevity**: Sustainable open source development

## Get Started

Join us in building the future of privacy management:

<Cards>
  <Card title="Contributing to c15t.com" description="Learn how to contribute and join our community" href="/docs/open-source/contributing" />

  <Card title="License" description="Understanding the GNU3 license and your rights" href="/docs/open-source/license" />
</Cards>


file: ./src/content/framework/react/examples/css-variables.mdx
meta: {
  "title": "CSS Variables",
  "description": "A Cookie Banner example using CSS Variables. This example shows how to use CSS Variables to style the cookie banner."
}
        
import CSSVariablesCookieBannerExample from '../../../../examples/react/css-variables/index';

<CSSVariablesCookieBannerExample />


file: ./src/content/framework/react/examples/css.mdx
meta: {
  "title": "CSS Cookie Banner",
  "description": "A Cookie Banner example using CSS. This example shows how to use CSS & CSS Modules to style the cookie banner."
}
        
import CSSCookieBannerExample from '../../../../examples/react/css/index';

<CSSCookieBannerExample />


file: ./src/content/framework/react/examples/tailwind.mdx
meta: {
  "title": "Tailwind Cookie Banner",
  "description": "A Cookie Banner example using Tailwind CSS."
}
        
import TailwindCookieBannerExample from '../../../../examples/react/tailwind/index';

<TailwindCookieBannerExample />


file: ./src/content/framework/react/guides/scroll-locking.mdx
meta: {
  "title": "Scroll Locking",
  "description": "Implement effective scroll locking to ensure users provide explicit privacy consent before accessing your site content."
}
        
import { Callout } from 'fumadocs-ui/components/callout';
import { LockIcon, MousePointerClickIcon, ShieldAlertIcon, ScaleIcon, GlobeIcon, CodeIcon } from 'lucide-react';

<Callout type="info">
  **Quick Start:** Scroll locking is **disabled by default**. Enable it with `lockScroll={true}` when needed for stronger compliance.
</Callout>

## What is Scroll Locking?

Scroll locking creates a barrier between users and your content by:

* **Preventing background scrolling** of your website
* **Displaying an overlay** behind privacy components like cookie banners
* **Blocking interaction** with the underlying page
* **Requiring explicit consent** before allowing site access

This approach is particularly important when legal requirements demand that users affirmatively opt in to data collection. It helps ensure that:

* Consent is not presumed by default (addressing concerns raised by regulations such as the UK GDPR and CCPA/CPRA)
* Users are presented with clear and unambiguous privacy notices, as required under Articles 13 and 14 of the UK GDPR

## When to Use Scroll Locking

Consider implementing scroll locking when:

<div className="grid grid-cols-1 md:grid-cols-3 gap-4 my-6">
  <div className="border rounded-lg p-4">
    <ShieldAlertIcon className="h-6 w-6 mb-2 text-fd-primary" />

    <h3 className="text-lg font-medium">Legal Requirements</h3>
    <p>For jurisdictions with stricter privacy laws requiring explicit consent before tracking</p>
  </div>

  <div className="border rounded-lg p-4">
    <MousePointerClickIcon className="h-6 w-6 mb-2 text-fd-primary" />

    <h3 className="text-lg font-medium">Critical Notices</h3>
    <p>When users must not miss important privacy information</p>
  </div>

  <div className="border rounded-lg p-4">
    <LockIcon className="h-6 w-6 mb-2 text-fd-primary" />

    <h3 className="text-lg font-medium">Sensitive Data</h3>
    <p>Sites handling especially sensitive personal data requiring informed consent</p>
  </div>
</div>

## User Experience and Legal Tradeoffs

While scroll locking increases friction to ensure that consent is informed and explicit, this friction is a designed tradeoff in scenarios where legal obligations require demonstrable user consent.

### Best Practices

1. **Clear Messaging**: Explain why access is blocked and what action is required
2. **Simple Choices**: Make consent options straightforward and obvious
3. **Responsive Design**: Ensure the banner works well on all device sizes
4. **Visual Cues**: Add subtle visual indicators that the site is locked
5. **Accessibility**: Test with screen readers to confirm proper announcements and ensure compliance with both privacy law requirements and accessibility standards

### Common Pitfalls

<Callout type="warn">
  Be aware that overly aggressive scroll locking can lead to usability issues (such as higher bounce rates) even as it improves compliance. Thus, regular user testing—as well as legal reviews—is recommended to balance compliance with user experience.

  Potential issues include:

  * Increased bounce rates
  * Frustrated users making hasty decisions
  * Accessibility issues if not implemented properly
  * Poor mobile experiences
</Callout>

## Implementation

### Basic Setup

To enable scroll locking (which is disabled by default), set the `lockScroll` prop to `true` on the `CookieBanner` component:

```tsx
import { CookieBanner, ConsentManagerProvider } from "@c15t/react";

function App() {
  return (
    <ConsentManagerProvider>
      <YourApp />
      <CookieBanner 
        lockScroll={true} // Explicitly enabling scroll locking
        title="Privacy Notice"
        description="We need your consent before you can access our site."
      />
    </ConsentManagerProvider>
  );
}
```

By default, our components prioritize a balanced user experience with less friction, but enabling scroll locking gives you stronger compliance coverage when your use case requires it.

### Comprehensive Styling

Once you've enabled scroll locking, you may want to customize its appearance to match your site's design.

For a complete guide on styling options and theming capabilities, including:

* Using style objects and CSS variables
* Working with component hierarchies
* Type-safe styling
* Responsive design patterns

<Callout type="info">
  See our [Styling Guide](/docs/framework/react/guides/styling-guide) for detailed information on how to fully customize the appearance of scroll-locked components while maintaining accessibility.
</Callout>

## Examples

Here are some practical implementations of scroll locking for different scenarios:

### Basic Implementation

```tsx
import { CookieBanner } from "@c15t/react";

function App() {
  return (
    <ConsentManagerProvider>
      <YourApp />
      <CookieBanner 
        lockScroll={true}
        title="Privacy Notice"
        description="We use cookies to enhance your browsing experience. Please accept our cookie policy to continue."
      />
    </ConsentManagerProvider>
  );
}
```

### GDPR-Focused Implementation

```tsx
<CookieBanner 
  lockScroll={true}
  title="Important Privacy Notice"
  description="European privacy regulations require your explicit consent before we can show you our content or set any cookies."
  rejectButtonText="Decline All"
  acceptButtonText="Accept All"
  customizeButtonText="Customize Settings"
/>
```

## Technical Details

### How Scroll Locking Works

When enabled, the scroll locking mechanism:

1. Adds `overflow: hidden` to the document body
2. Renders a full-viewport overlay with a high z-index
3. Positions the cookie banner above this overlay
4. Prevents events from reaching elements beneath the overlay
5. Restores normal scrolling once consent is provided

### Keyboard Accessibility

In addition to locking scroll behavior, it's important to ensure keyboard users have a good experience.

Even with scroll locking, keyboard navigation should remain functional within the banner:

```tsx
<CookieBanner
  lockScroll={true}
  trapFocus={true} // Ensures keyboard focus stays within the banner
/>
```

## Legal Context and Rationale

<details>
  <summary>**Expand for Legal Information**</summary>

  Legal frameworks worldwide—including the EU's GDPR, the UK GDPR, and certain state-level U.S. privacy laws (e.g., California's CCPA/CPRA, Delaware's DPDPA, and the Maryland Online Data Privacy Act)—set out critical requirements regarding consent:

  ### Explicit Consent

  * Regulations mandate that consent be an active, affirmative action (for example, pre-ticked boxes are prohibited)
  * Scroll locking directly supports these requirements by forcing users to interact with the privacy interface before site access is granted

  ### Transparency and Separation of Consent

  * Privacy notices must be clear, easily accessible, and separate from other terms and conditions
  * The modal experience created by scroll locking isolates the consent mechanism from other content, underscoring that users are making an informed and deliberate choice

  ### Auditability and Record-Keeping

  * Jurisdictions expect controllers to keep evidence of consent (tracking who, when, and how consent was provided)
  * By ensuring that users must actively engage with a dedicated consent interface, scroll locking helps create a clear audit trail—a best practice highlighted in legal guidance documents

  ### Jurisdiction-Specific Considerations

  * EU and UK requirements specify that consent must be granular, meaning different types of processing require separate permission
  * While some U.S. jurisdictions (e.g., California) may allow more flexibility, it is advisable to use a robust technique like scroll locking in environments where multiple legal regimes apply
  * Controllers should adapt their mechanisms (such as overlay styling, animation effects, and accessibility features) based on the legal expectations of the primary user base
</details>

## Compliance Considerations by Region

Different regions have varying requirements for obtaining consent:

| Region     | Regulation                                        | Recommendation                                                                              |
| ---------- | ------------------------------------------------- | ------------------------------------------------------------------------------------------- |
| EU         | GDPR (Articles 13, 14; explicit consent required) | Use scroll locking with clear opt-in and granular options                                   |
| California | CCPA/CPRA                                         | Assess whether explicit consent via scroll locking is needed; modifications may be required |
| UK         | UK GDPR                                           | Follow a similar approach as the EU, ensuring detailed privacy notices                      |
| Global     | Varies                                            | Adopt an adaptive approach based on the user's location and relevant regulations            |

## Conclusion and Legal Best Practices

Scroll locking provides a robust mechanism for ensuring that users have engaged with privacy notices and provided explicit consent before interacting with site content. Legally, this technique supports the principles inherent within data protection regimes:

* Explicit, informed consent
* Separation and clarity of consent requests
* Auditability and clear records of consent

By integrating scroll locking in a compliant manner, organizations can better protect sensitive data, adhere to legal obligations, and build user trust. Always consult the latest legal guidance and consider jurisdiction-specific adjustments when designing and implementing consent mechanisms.

For integration with other components, see the [Cookie Banner](/docs/framework/react/cookie-banner) and [Consent Manager Dialog](/docs/framework/react/consent-manager-dialog) documentation.


file: ./src/content/framework/react/guides/styling-guide.mdx
meta: {
  "title": "Styling Guide",
  "description": "Learn how to customize the appearance of @c15t/react components through our flexible theming system."
}
        
Our theming system provides a powerful way to customize the appearance of @c15t/react components while maintaining their functionality and accessibility. This guide will walk you through the different approaches to styling and help you understand how our theming system works.

## Understanding the Theming System

Think of our theming system as a set of style instructions that cascade through your components, similar to CSS but with more structure and type safety. Each component has specific customizable areas, called theme keys, that you can target for styling.

For example, when you want to style a Cookie Banner, you might want to customize:

* The banner's container
* The title and description text
* The action buttons
* The overlay background

Our theming system makes this straightforward while ensuring you can't accidentally target non-existent elements.

## Basic Theme Structure

Let's start with a simple example of customizing a Cookie Banner:

```tsx
<CookieBanner 
  theme={{
    'banner.root': 'bg-white p-4 rounded-lg shadow-lg',
    'banner.header.title': 'text-xl font-bold text-gray-900',
    'banner.header.description': 'text-sm text-gray-600 mt-2',
    'banner.footer': 'mt-4 flex justify-end gap-2'
  }}
/>
```

Every theme key follows a predictable pattern:

1. The component name, which will be banner, widget, dialog.
2. The element path (e.g., 'header.title' or 'footer.accept-button')
3. Optional state variations (e.g., 'switch.thumb.checked')

## Style Values

Our theming system supports several ways to define styles:

### String Classes

The simplest approach is using class names:

```tsx
theme={{
  'banner.root': 'my-custom-class another-class'
}}
```

### Style Objects

For inline styles, use a style object:

```tsx
theme={{
  'banner.root': {
    style: {
      backgroundColor: 'white',
      padding: '1rem'
    }
  }
}}
```

### CSS Variables

CSS Variables allow you to customize the component using the component's CSS variables.

````tsx
theme={{
  'banner.root': {
    style: {
      '--banner-background-color': 'white',
      '--banner-background-color-dark': 'black',
      '--banner-border-radius': '0.5rem',
      '--banner-border-color': '1px solid #e0e0e0'
    }
  }
}}

### Combined Approach
You can use both classes and inline styles together:

```tsx
theme={{
  'banner.root': {
    className: 'my-custom-class',
    style: {
      backgroundColor: 'white'
    }
  }
}}
````

## Working with Component Hierarchies

@c15t/react components often contain nested elements. Understanding this hierarchy helps you style effectively:

```tsx
// Example of nested component styling
const theme = {
  'widget.root': 'container mx-auto',
  'widget.accordion': 'space-y-2',
  'widget.accordion.item': 'border rounded-sm',
  'widget.accordion.trigger': 'p-4 hover:bg-gray-50',
  'widget.accordion.trigger-inner': '',
  'widget.accordion.content': 'p-4 bg-gray-50'
}
```

Each level in the hierarchy can be styled independently, giving you fine-grained control over the appearance.

## Using Theme Context

For consistent styling across your application, you can use theme context:

```tsx
import { ThemeProvider } from '@c15t/react'

const globalTheme = {
  // Your theme configuration
}

function App() {
  return (
    <ThemeProvider theme={globalTheme}>
      <YourApp />
    </ThemeProvider>
  )
}
```

## Disabling Default Styles

Sometimes you might want to start from scratch. Use the `noStyle` prop to remove all default styling:

```tsx
<CookieBanner noStyle theme={yourCustomTheme} />
```

## Type-Safe Styling

Our theming system includes TypeScript support to help prevent errors:

```tsx
import type { CookieBannerTheme } from '@c15t/react'

// TypeScript will catch invalid theme keys
const theme: CookieBannerTheme = {
  'banner.root': 'valid-key',
  'banner.invalid': 'TypeScript error!' // Error: invalid key
}
```

## Responsive Design

You can use media queries and responsive classes just like you would in regular CSS:

```tsx
theme={{
  'banner.root': 'p-4 md:p-6 lg:p-8',
  'banner.header.title': {
    style: {
      fontSize: 'clamp(1rem, 2vw, 1.5rem)'
    }
  }
}}
```

## Common Patterns

Here are some effective patterns for common styling needs:

### Creating a Clean, Modern Look

```tsx
const modernTheme = {
  'banner.root': 'bg-white shadow-lg rounded-lg mx-4 sm:mx-auto max-w-2xl',
  'banner.header.title': 'text-lg font-semibold text-gray-900',
  'banner.header.description': 'text-sm text-gray-600 mt-2',
  'banner.footer': 'mt-6 flex flex-col sm:flex-row justify-end gap-3'
}
```

### Building Dark Mode Support

```tsx
const darkModeTheme = {
  'banner.root': 'bg-gray-900 dark:bg-gray-800',
  'banner.header.title': 'text-white dark:text-gray-100',
  'banner.header.description': 'text-gray-300 dark:text-gray-400'
}
```

## Best Practices

1. **Maintain Accessibility**
   * Ensure sufficient color contrast
   * Keep interactive elements visually distinct
   * Test your styles with screen readers

2. **Consider Responsive Design**
   * Start with mobile-first styles
   * Use flexible units (rem, em) over fixed pixels
   * Test across different screen sizes

3. **Performance**
   * Group related styles together
   * Avoid unnecessary style overrides
   * Use CSS classes over inline styles when possible

4. **Maintainability**
   * Keep theme configurations organized
   * Document custom styles
   * Use consistent naming conventions

## Troubleshooting

If your styles aren't applying as expected, check these common issues:

1. **Style Precedence**
   * Component-level styles take precedence over theme context
   * More specific selectors take precedence over general ones

2. **Class Name Conflicts**
   * Use unique class names to avoid conflicts
   * Consider using CSS modules or similar solutions

3. **Theme Key Accuracy**
   * Verify theme keys match exactly
   * Check for typos in dot notation paths


file: ./src/content/framework/react/guides/translation.mdx
meta: {
  "title": "Internationalization",
  "description": "Learn how to translate c15t.com components to your language with i18n."
}
        
## Understanding the Translation System

c15t.com uses a simple yet powerful translation system that allows you to:

* Provide translations for all UI text in multiple languages
* Set a default language
* Fall back to English when translations are missing

The translation system is built into the core package and is used by all components. Each component automatically uses the correct translations based on your configuration.

## Basic Translation Setup

To provide your own translations, pass them through the `ConsentManagerProvider` configuration:

```tsx
  import { ConsentManagerProvider } from '@c15t/react';

function App() {
  return (
    <ConsentManagerProvider
      initialGdprTypes={['necessary', 'marketing']}
      translationConfig={{
        translations: {
          de: {
            cookieBanner: {
              title: 'Wir respektieren Ihre Privatsphäre',
              description: 'Diese Website verwendet Cookies...',
              acceptAll: 'Alle akzeptieren',
              rejectAll: 'Alle ablehnen',
              customize: 'Anpassen',
            },
          },
        },
      }}
    >
      {/* Your app content */}
    </ConsentManagerProvider>
  );
}
```

## Translation Structure

The translation object follows a specific structure with these main sections:

* `cookieBanner`: Translations for the cookie consent banner
* `consentManagerDialog`: Translations for the detailed consent management dialog
* `consentManagerWidget`: Translations for the floating consent manager widget
* `consentTypes`: Translations for different types of consent categories

Here's the complete structure of the translation object:

```typescript
interface Translations {
  cookieBanner: {
    title: string;
    description: string;
    acceptAll: string;
    rejectAll: string;
    customize: string;
  };
  consentManagerDialog: {
    title: string;
    description: string;
    save: string;
    acceptAll: string;
    rejectAll: string;
    close: string;
  };
  consentManagerWidget: {
    title: string;
    description: string;
    save: string;
  };
  consentTypes: {
    necessary: {
      title: string;
      description: string;
    };
    functionality: {
      title: string;
      description: string;
    };
    marketing: {
      title: string;
      description: string;
    };
    measurement: {
      title: string;
      description: string;
    };
    experience: {
      title: string;
      description: string;
    };
  };
}
```

## Best Practices

1. **Complete Translations**: Ensure you provide translations for all keys in your language object. Missing translations will fall back to English.

2. **Testing**: Test your translations in the actual UI to ensure text fits properly and doesn't break layouts.

3. **Maintenance**: Keep your translations in sync with the English version when updating to new versions of this package.

## Default Language

The `defaultLanguage` in the translation config determines which language to use. If translations for the specified language are not found or are incomplete, the system automatically falls back to English.

```tsx
translationConfig: {
  defaultLanguage: 'fr', // Set French as default
  translations: {
    fr: {
      // French translations
    },
    // Other languages...
  }
}
```

## Using Translations Programmatically

If you're building custom components that need to access translations, you can use the `useTranslations` hook:

```tsx
import { useTranslations } from '@c15t/react';

function CustomComponent() {
  const translations = useTranslations();
  
  return (
    <div>
      <h2>{translations.cookieBanner.title}</h2>
      {/* Use other translation keys as needed */}
    </div>
  );
}
```

This hook automatically handles language selection and fallback behavior, ensuring your component always has access to the correct translations.


file: ./src/content/framework/react/hooks/use-consent-manager.mdx
meta: {
  "title": "useConsentManager",
  "description": "The useConsentManager hook provides access to the complete consent management API, allowing you to interact with and control the consent state throughout your application."
}
        
import UseConsentManagerExample from '~/examples/react/use-consent-manager';

## Usage `useConsentManager`

This example shows the hook being used to re-open the cookie banner once it has been closed. This could be used to re-open the banner after a certain amount of time has passed, or when a user wishes to update their consents for example.

<UseConsentManagerExample />

## Returns

The hook returns an object containing both state properties and methods for managing consent:

<AutoTypeTable path="node_modules/c15t/src/index.ts" name="PrivacyConsentState" />

## Notes

* The hook must be used within a `ConsentManagerProvider` component
* Throws an error if used outside of a `ConsentManagerProvider`
* All methods are memoized and safe to use in effects or callbacks
* Changes to consent state are automatically persisted
* Supports TypeScript with full type safety


file: ./src/content/framework/react/hooks/use-focus-trap.mdx
meta: {
  "title": "useFocusTrap",
  "description": "The useFocusTrap hook provides accessibility-focused keyboard navigation management, keeping focus trapped within modal components for better user experience."
}
        
import UseFocusTrapExample from '~/examples/react/use-focus-trap';

The `useFocusTrap` hook creates an accessible experience by preventing keyboard focus from leaving a specific container element (like a dialog or modal) until it's dismissed. This is essential for users navigating with keyboards or screen readers.

## Usage

This example shows how to implement focus trapping in a simple modal component:

<UseFocusTrapExample />

## Parameters

The hook accepts two parameters:

| Parameter    | Type                            | Description                                                   |
| ------------ | ------------------------------- | ------------------------------------------------------------- |
| shouldTrap   | boolean                         | Controls whether focus should be trapped within the container |
| containerRef | RefObject\<HTMLElement> \| null | Reference to the DOM element that should contain the focus    |

## Returns

This hook doesn't return any values. It works by managing the focus behavior of the DOM through side effects.

## How It Works

When activated, the `useFocusTrap` hook:

1. Stores the element that was focused before trapping began
2. Finds all focusable elements within the container
3. Sets initial focus to the first focusable element (or the container itself)
4. Captures Tab and Shift+Tab keystrokes to cycle focus within the container
5. Restores focus to the original element when the component unmounts or `shouldTrap` becomes false

## Notes

* Hook must be called with a valid element reference that contains focusable elements
* Adding `tabIndex={0}` to the container ensures it can receive focus if no focusable children exist
* Always include proper ARIA attributes (`role="dialog"` and `aria-modal="true"`) for screen reader accessibility
* The hook automatically restores focus to the previously focused element when the component unmounts
* Set `shouldTrap` to false when you want to disable focus trapping temporarily

## Accessibility Compliance

Using this hook helps your application comply with these WCAG 2.1 requirements:

* [2.1.2: No Keyboard Trap](https://www.w3.org/WAI/WCAG21/Understanding/no-keyboard-trap.html) - While this criterion warns against trapping keyboard focus, modal dialogs are an exception when implemented properly
* [2.4.3: Focus Order](https://www.w3.org/WAI/WCAG21/Understanding/focus-order.html) - Ensures focus moves in a meaningful sequence

## Usage with C15t Components

Many C15t components like `CookieBannerCard` and `ConsentManagerDialog` use this hook internally, so you don't need to implement it yourself when using these components. The `trapFocus` prop can be used to control this behavior:

```tsx
// The dialog will automatically trap focus when open
<ConsentManagerDialog trapFocus={true} />

// Focus trapping can be disabled if needed
<CookieBannerCard trapFocus={false}>
  {/* Content */}
</CookieBannerCard>
```

## Implementation Example

Here's how focus trapping is implemented in the `CookieBannerCard` component:

```tsx
const CookieBannerCard = forwardRef(({ children, ...props }, ref) => {
  const { trapFocus } = useTheme();
  const localRef = useRef(null);
  const cardRef = (ref || localRef);
  
  // Convert to boolean and enable focus trapping
  const shouldTrapFocus = Boolean(trapFocus);
  useFocusTrap(shouldTrapFocus, cardRef);
  
  return (
    <Box
      ref={ref}
      tabIndex={0}
      aria-modal={shouldTrapFocus ? 'true' : undefined}
      role={shouldTrapFocus ? 'dialog' : undefined}
      {...props}
    >
      {children}
    </Box>
  );
});
```