Overrides

Pass extra classes when calling a recipe to customize a single instance — for example a full-width button or tighter spacing.

Global override with class or className

Both props work identically. Pass them when calling the recipe:

import { tv } from 'tailwind-variants';const button = tv({  base: 'inline-flex cursor-pointer items-center justify-center rounded-full px-4 py-2 text-sm font-medium select-none',  variants: {    variant: {      primary: 'bg-zinc-900 text-white'    }  }});button({ variant: 'primary' });button({ variant: 'primary', class: 'w-full' });

Overrides merge with variant output. In the default build, conflicting Tailwind utilities resolve — later wins according to merge rules.

Slot overrides

With slots, pass overrides to individual slot functions:

const alert = tv({
  slots: {
    base: 'flex gap-3 rounded-lg p-4',
    title: 'font-semibold'
  }
});

const { base, title } = alert();

base({ class: 'border border-zinc-200' });
title({ className: 'text-lg' });

Each slot function accepts the same override props as the root call.

Slotted root overrides

You can also pass overrides to the root call — they apply to the implicit or explicit base slot:

const slots = alert({ class: 'max-w-md' });
slots.base(); // includes max-w-md