Untitled

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:

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

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

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

.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:

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

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

You can also set noStyle per-slot:

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.