The fastest, smallest CSS variant library for JavaScript and TypeScript.
A zero-dependency, type-safe alternative to CVA (Class Variance Authority) and tailwind-variants. Build powerful component style systems with variants — works with Tailwind CSS, vanilla CSS, CSS Modules, or any styling solution.
| Package | Description | Size |
|---|---|---|
| css-variants | Core library for CSS variant composition | ~1KB |
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' })| 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 |
Full documentation: css-variants.vercel.app
MIT © Tim Phan