---
title: Component Slots
description: Target individual component parts with styles using the slot system - className strings or inline style objects.
---
## What are Slots?

Slots let you target specific parts of consent components with styles. Each component is built from named slots such as `consentBannerTitle` and `consentDialogTag`.

Use slots after the stock component APIs and design tokens:

* If the change is semantic, prefer tokens first. For example, the stock banner footer background comes from `theme.colors.surfaceHover`.
* If the component part is correct but you need a local tweak, use a slot.

Common banner slot choices:

* `consentBannerCard` for card radius, shadow, width, and local background treatment
* `consentBannerFooter` for spacing, borders, and local footer styling
* `consentBannerTitle` for title typography
* `buttonPrimary` and `buttonSecondary` for shared button classes

## Using Slots

Pass slot styles in the theme's `slots` object:

```tsx
const theme = {
  slots: {
    consentBannerFooter: 'border-t border-black/10 px-6',
    consentBannerTitle: 'text-xl font-bold tracking-tight',

    // Object value = className + inline styles
    consentBannerCard: {
      className: 'rounded-xl shadow-lg',
      style: { maxWidth: '600px' },
    },
  },
} satisfies Theme;
```

## Slot Style Types

Each slot accepts either a `string` (treated as className) or a `SlotStyle` object:

```tsx
// String: treated as className
consentBannerTitle: 'my-custom-class'

// Object: className + style + noStyle
consentBannerFooter: {
  className: 'border-t border-black/10',
  style: { paddingBlock: '1rem' },
  noStyle: false, // Set true only when you want to remove this slot's default styling
}
```

`noStyle` on a slot is an advanced escape hatch. Start with className and style overrides first.

## Example: Style the stock banner without changing markup

```tsx
const theme = {
  colors: {
    surface: '#fffdf8',
    surfaceHover: '#f6f3ee',
  },
  slots: {
    consentBannerCard: 'rounded-[28px] shadow-xl',
    consentBannerFooter: 'border-t border-black/10 px-6',
    consentBannerTitle: 'tracking-tight',
  },
} satisfies Theme;
```

## Available Slots

Use the typed API reference below for the full slot list and descriptions. It stays in sync with the actual component slot surface.

## API Reference

| Property                    | Type                   | Description                                                          | Default | Required |
| :-------------------------- | :--------------------- | :------------------------------------------------------------------- | :------ | :------: |
| consentBanner               | SlotStyle \| undefined | Root wrapper for the consent banner portal content.                  | -       | Optional |
| consentBannerCard           | SlotStyle \| undefined | Main card container for banner content and actions.                  | -       | Optional |
| consentBannerHeader         | SlotStyle \| undefined | Header region containing title and description.                      | -       | Optional |
| consentBannerTitle          | SlotStyle \| undefined | Banner title text element.                                           | -       | Optional |
| consentBannerDescription    | SlotStyle \| undefined | Banner description text element.                                     | -       | Optional |
| consentBannerFooter         | SlotStyle \| undefined | Footer container for banner action buttons.                          | -       | Optional |
| consentBannerFooterSubGroup | SlotStyle \| undefined | Nested button group inside the banner footer.                        | -       | Optional |
| consentBannerTag            | SlotStyle \| undefined | Branding tag rendered above the consent banner card.                 | -       | Optional |
| consentBannerOverlay        | SlotStyle \| undefined | Backdrop overlay rendered behind the banner when enabled.            | -       | Optional |
| consentDialog               | SlotStyle \| undefined | Root wrapper for the consent dialog modal.                           | -       | Optional |
| consentDialogCard           | SlotStyle \| undefined | Main dialog card container.                                          | -       | Optional |
| consentDialogHeader         | SlotStyle \| undefined | Dialog header region containing title and description.               | -       | Optional |
| consentDialogTitle          | SlotStyle \| undefined | Dialog title text element.                                           | -       | Optional |
| consentDialogDescription    | SlotStyle \| undefined | Dialog description text element.                                     | -       | Optional |
| consentDialogContent        | SlotStyle \| undefined | Dialog content region (typically holds ConsentWidget).               | -       | Optional |
| consentDialogFooter         | SlotStyle \| undefined | Footer container used by compound dialog layouts.                    | -       | Optional |
| consentDialogTag            | SlotStyle \| undefined | Branding tag rendered below the stock consent dialog card.           | -       | Optional |
| consentDialogOverlay        | SlotStyle \| undefined | Backdrop overlay rendered behind the dialog.                         | -       | Optional |
| consentWidget               | SlotStyle \| undefined | Root wrapper for the consent widget/preferences panel.               | -       | Optional |
| consentWidgetAccordion      | SlotStyle \| undefined | Accordion region listing consent categories.                         | -       | Optional |
| consentWidgetFooter         | SlotStyle \| undefined | Footer area for widget actions and links.                            | -       | Optional |
| consentWidgetTag            | SlotStyle \| undefined | Branding tag rendered below the standalone consent widget.           | -       | Optional |
| frame                       | SlotStyle \| undefined | Frame wrapper used by blocking placeholders (e.g., iframe blocking). | -       | Optional |
| iabConsentBanner            | SlotStyle \| undefined | Root wrapper for the IAB consent banner.                             | -       | Optional |
| iabConsentBannerCard        | SlotStyle \| undefined | Main card container for IAB banner content.                          | -       | Optional |
| iabConsentBannerHeader      | SlotStyle \| undefined | Header region for IAB banner title/description.                      | -       | Optional |
| iabConsentBannerFooter      | SlotStyle \| undefined | Footer container for IAB banner actions.                             | -       | Optional |
| iabConsentBannerTag         | SlotStyle \| undefined | Branding tag rendered above the IAB banner card.                     | -       | Optional |
| iabConsentBannerOverlay     | SlotStyle \| undefined | Backdrop overlay rendered behind the IAB banner.                     | -       | Optional |
| iabConsentDialog            | SlotStyle \| undefined | Root wrapper for the IAB consent dialog.                             | -       | Optional |
| iabConsentDialogCard        | SlotStyle \| undefined | Main card container for IAB dialog content.                          | -       | Optional |
| iabConsentDialogHeader      | SlotStyle \| undefined | Header region for IAB dialog title/description.                      | -       | Optional |
| iabConsentDialogFooter      | SlotStyle \| undefined | Footer container for IAB dialog actions.                             | -       | Optional |
| iabConsentDialogTag         | SlotStyle \| undefined | Branding tag rendered below the IAB dialog card.                     | -       | Optional |
| iabConsentDialogOverlay     | SlotStyle \| undefined | Backdrop overlay rendered behind the IAB dialog.                     | -       | Optional |
| buttonPrimary               | SlotStyle \| undefined | Shared primary button style used across consent components.          | -       | Optional |
| buttonSecondary             | SlotStyle \| undefined | Shared secondary button style used across consent components.        | -       | Optional |
| toggle                      | SlotStyle \| undefined | Shared toggle/switch style used for category controls.               | -       | Optional |

| Property  | Type      | Description              | Default |  Required  |
| :-------- | :-------- | :----------------------- | :------ | :--------: |
| SlotStyle | SlotStyle | Type alias for SlotStyle | -       | ✅ Required |