c15t/docs/shared/react/styling/classnames.md

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

---
title: Classnames
description: Reference page for classnames.
group: reference
---
## Prefer Slots for Stock Components

There is no single top-level `className` contract across every pre-built consent component.

For the stock `ConsentBanner`, `ConsentDialog`, and `ConsentWidget`, prefer `theme.slots` first. That keeps the markup intact and lets you target the exact part you need.

## Per-Slot className

Target individual component parts via the theme's `slots` object. Each slot accepts a string (className) or an object with `className` and `style`:

```tsx
const theme = {
  slots: {
    consentBannerTitle: 'text-xl font-semibold',
    consentBannerDescription: 'text-sm text-gray-600',
    consentBannerFooter: 'flex gap-3',
    buttonPrimary: 'rounded-full px-6',
  },
} satisfies Theme;
```

## Combining with CSS Modules

```tsx
import styles from './consent.module.css';

const theme = {
  slots: {
    consentBannerCard: styles.bannerCard,
    consentBannerTitle: styles.bannerTitle,
    buttonPrimary: styles.primaryButton,
  },
} satisfies Theme;
```

```css title="consent.module.css"
.bannerCard {
  backdrop-filter: blur(12px);
  background: rgba(255, 255, 255, 0.9);
}

.bannerTitle {
  font-size: 1.25rem;
  font-weight: 700;
}

.primaryButton {
  border-radius: 9999px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
```

## When to Use Raw className

Use raw className-level styling when:

* your styling system is already class-driven
* tokens are too broad for the change
* slots already identify the correct element

If the request is "make the banner footer darker", prefer `theme.colors.surfaceHover` first. If the request is "add a border and spacing only to the footer", prefer `theme.slots.consentBannerFooter`.

## Advanced: `noStyle`

Use `noStyle` only when you want to remove defaults and style from scratch while still keeping c15t's component structure:

```tsx
{/* Remove all styles from a specific component */}
<ConsentBanner noStyle />

{/* Remove all styles globally */}
<ConsentManagerProvider options={{ noStyle: true, ... }}>
```

You can also set `noStyle` per-slot:

```tsx
const theme = {
  slots: {
    consentBannerCard: { noStyle: true, className: 'my-custom-card' },
  },
} satisfies Theme;
```

Treat `noStyle` as an advanced escape hatch. Do not jump to it just because a token or slot needs debugging.

For full custom markup and behavior, continue to [Headless Mode](../headless).