# Slots (https://www.tailwind-variants.org/docs/slots)

Style multi-part components with named slots, per-slot variants, and compound slots from a single recipe.

Slots let you style and variant each part of a multi-part component — icon, label, wrapper, content — from one recipe.

## Enable slot mode
Pass a `slots` object. Each key becomes a named slot function on the return value:

```ts
import { tv } from 'tailwind-variants';

const alert = tv({
  slots: {
    base: 'flex gap-3 rounded-lg p-4',
    icon: 'size-5 shrink-0',
    title: 'font-semibold',
    description: 'text-sm opacity-80'
  }
});

const { base, icon, title, description } = alert();

base();
title();
```

> **info:** Pass an explicit empty `slots: {}` to enable slot mode with an implicit `base` slot only. Omit `slots` entirely when you want a plain class string return.

## Variants per slot
With slots, variant values must be **objects** — one class string (or array) per slot:

```ts
import { tv } from 'tailwind-variants';

const alert = tv({
  slots: {
    base: 'flex gap-3 rounded-lg p-4',
    icon: 'size-5 shrink-0',
    title: 'font-semibold',
    description: 'text-sm opacity-80'
  },
  variants: {
    color: {
      default: {
        base: 'bg-zinc-100 text-zinc-900',
        icon: 'text-zinc-500',
        title: 'text-zinc-900'
      },
      danger: {
        base: 'bg-red-50 text-red-900',
        icon: 'text-red-500',
        title: 'text-red-900'
      }
    }
  },
  defaultVariants: {
    color: 'default'
  }
});

const slots = alert({ color: 'danger' });
slots.base();
slots.icon();
```

TV selects the correct classes for each slot automatically.

## Compound slots
`compoundSlots` apply extra classes to specific slots when variant conditions match — same idea as compound variants, but targeted per slot:

```ts
const card = tv({
  slots: { base: 'rounded-xl p-4', header: 'font-bold' },
  variants: {
    elevated: { true: {}, false: {} }
  },
  compoundSlots: [
    {
      elevated: true,
      slots: ['base'],
      class: 'shadow-lg'
    }
  ]
});
```

Use compound slots when a combination should restyle only certain parts.