c15t/docs/shared/react/guides/headless.md

Headless JavaScript consent management platform for cookie banners, privacy preferences, consent storage, and script gating.

---
title: Headless
description: Reference page for headless.
group: reference
---
c15t's headless mode means using the hooks (`useConsentManager`, `useTranslations`, etc.) without any pre-built UI components. This gives you complete control over the consent experience.

Before you go headless, walk the customization ladder in order:

1. **Pre-built components** - Use provider options, component props, tokens, slots, and `theme.consentActions`
2. **Compound components** - Rearrange c15t primitives when the markup order must change
3. **`noStyle`** - Keep c15t structure but replace its styling
4. **Headless** - Use only hooks and build the entire UI yourself

## When to Go Headless

Go headless when:

* Your design system requires complete control over markup
* You need a consent flow that doesn't fit the banner/dialog pattern
* You want to embed consent choices inline rather than as overlays

Use a lower-power tool instead when:

* The component structure works but the styling doesn't -> use tokens, slots, or `noStyle`
* You only need to rearrange existing c15t parts -> use compound components
* You want to change copy -> use `ConsentManagerProvider.options.i18n`
* You only need to restyle stock actions -> use `theme.consentActions`

> ⚠️ **Warning:**
> Headless mode is not the first answer for pure theming. If you are still trying to debug why a banner footer color did not change, stay in the styling system and verify the token-to-component mapping before you rebuild the UI.