Warning
css-variants is no longer maintained. It keeps working, and existing versions stay on npm, but it will receive no new features or fixes.
Use @lynstack/class-recipe instead: it is faster, has stricter types and slots, and its sibling @lynstack/native-recipe supports React Native.
See Migrate to class-recipe.
Fastest CSS variant library for JavaScript and TypeScript.
A zero-dependency, type-safe alternative to CVA (Class Variance Authority) and tailwind-variants. ~1KB gzipped. 3-11x faster. Works with Tailwind CSS, vanilla CSS, CSS Modules, or any styling solution.
css-variants is a JavaScript library for managing CSS class variants with full TypeScript support. Define style variations (color, size, state) declaratively and get the correct CSS classes at runtime.
npm install css-variantsimport { cv } from 'css-variants'
const button = cv({
base: 'px-4 py-2 rounded font-medium',
variants: {
color: {
primary: 'bg-blue-600 text-white',
secondary: 'bg-gray-200 text-gray-800',
},
size: {
sm: 'text-sm px-3 py-1.5',
lg: 'text-lg px-6 py-3',
},
},
})
button({ color: 'primary', size: 'lg' })
// => 'px-4 py-2 rounded font-medium bg-blue-600 text-white text-lg px-6 py-3'| Feature | css-variants | CVA | tailwind-variants |
|---|---|---|---|
| Bundle size | ~1KB | ~2KB | ~5KB |
| Performance | Baseline | 3-7x slower | 5-11x slower |
| Slot variants | Built-in | No | Yes |
| Style variants | Built-in | No | No |
| Dependencies | 0 | 1 | 1 |
| Function | Description |
|---|---|
cv() |
Class variants for single-element components |
scv() |
Slot class variants for multi-element components |
sv() |
Style variants for inline CSS style objects |
ssv() |
Slot style variants for multi-element inline styles |
cx() |
Class name merger utility (like clsx) |
- Getting Started
- API Reference
- Tailwind CSS Guide
- css-variants vs CVA vs tailwind-variants
- Migrate to class-recipe
- Migrate from CVA
- FAQ
| Package | Description | Size |
|---|---|---|
| css-variants | Core library | ~1KB |
MIT © Tim Phan