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:
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();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:
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:
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.