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

### ComponentSlots

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

### SlotStyle

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