cva

Class Variance Authority (cva) with the same tailwind-merge pass as cx: the class string produced by the variant function is merged so Tailwind conflicts resolve predictably.

API matches cva from class-variance-authority: optional base classes, config with variants, defaultVariants, and compoundVariants. The returned function accepts variant props plus optional class / className for one-off overrides.

Use VariantProps with typeof buttonVariants (or similar) to type component props.

Examples:

const button = cva('rounded font-medium', {
  variants: {
    tone: { primary: 'bg-blue-600 text-white', ghost: 'bg-transparent' },
    size: { sm: 'text-sm px-2', md: 'text-base px-4' },
  },
  defaultVariants: { tone: 'primary', size: 'md' },
});
button({ tone: 'ghost', className: 'ml-2' });

const card = cva('border p-4', {
  variants: { elevated: { true: 'shadow-lg', false: 'shadow-none' } },
  defaultVariants: { elevated: false },
});
card({ elevated: true });