cv()
Type-safe class variant composition for building component styling systems.
Basic Usage
In Components
Compound Variants
Apply additional classes when multiple conditions match:
Passing Additional Classes
API Reference
cv(config)
Returns a function that generates class strings based on variant props.
Config Options
base string | string[] Base classes always applied
variants Record<string, Record<string, string>> Variant definitions mapping names to class strings
compounds Array<{condition, class}> Classes applied when multiple conditions match
defaults Record<string, string> Default values for each variant
Pattern: Exporting Styles
Comparison with CVA
cv() is inspired by CVA (Class Variance Authority) but optimized for Svelte 5:
- Zero dependencies
- Works naturally with
$derived - Simpler API (no TypeScript generics needed)
- Uses
cn()internally for class merging