# c15t React Docs

React-focused c15t docs for consent UI, hooks, headless flows, and script integrations.

If you are changing consent flows, consent UI, script loading, server-side setup, or backend configuration in an app that uses this package, start here before editing code.

## Start Here

- [Quickstart](./quickstart.md)
- [Headless](./headless.md)
- [Building Headless Components](./building-headless-components.md)
- [Callbacks](./callbacks.md)
- [Google Tag Manager](./integrations/google-tag-manager.md)

## Workflow Rules

### Styling

Use this when:
- customizing component appearance
- adapting c15t components to a design system
- deciding how far to override the default UI

Prefer:
- Prefer design tokens first.
- If tokens are not enough, use component slots.
- Then use CSS variables or `className` for targeted overrides.

If that is not enough:
- Use `noStyle` or a full headless rebuild only when the design system cannot be expressed through the supported styling layers.

Avoid:
- Do not rebuild the consent UI from scratch if tokens, slots, or scoped overrides are sufficient.

Read next:
- [Overview](./styling/overview.md)
- [Tokens](./styling/tokens.md)
- [Slots](./styling/slots.md)
- [Css Variables](./styling/css-variables.md)

### Consent UI Customization

Use this when:
- changing banners, dialogs, or preference centers
- deciding between built-in components and headless APIs

Prefer:
- Prefer the built-in components and their documented customization surfaces first.
- If the UI requirements diverge significantly, use the headless APIs.

Avoid:
- Do not rebuild the full consent flow if a token, slot, or component override is enough.

Read next:
- [Quickstart](./quickstart.md)
- [Consent Banner](./components/consent-banner.md)
- [Headless](./headless.md)
- [Building Headless Components](./building-headless-components.md)

### Scripts & Integrations

Use this when:
- adding third-party scripts in React components or providers
- wiring analytics or advertising behind consent

Prefer:
- Prefer premade scripts from `@c15t/scripts/*`.
- Start from the integration docs before implementing custom script wiring in React components.

Avoid:
- Do not duplicate consent-sync logic in React effects when the integration already handles it.

Read next:
- [Script Loader](./script-loader.md)
- [Google Tag Manager](./integrations/google-tag-manager.md)
- [Meta Pixel](./integrations/meta-pixel.md)