CSS variant composition for modern JavaScript

Complete Toolkit

cv - Class Variants Single-element component styling with class names

scv - Slot Class Variants Multi-element components with named slots

sv - Style Variants Inline CSS style objects with variants

ssv - Slot Style Variants Multi-slot inline style management

Powerful Features

Compound Variants

Apply styles when multiple variant conditions are met simultaneously.

compoundVariants: [
  {
    color: 'primary',
    size: 'lg',
    class: 'uppercase tracking-wide'
  }
]

Boolean Variants

Simple on/off toggles for common states like disabled, loading, or active.

variants: {
  disabled: {
    true: 'opacity-50 cursor-not-allowed'
  }
}

Slot System

Style multi-element components with named slots for complex UI patterns.

slots: ['root', 'header'],
base: {
  root: 'card-root',
  header: 'card-header'
}

Class Merging

Smart class name merging with the cx utility. Handle conditional classes with ease.

cx('base', condition && 'active', {
  'enabled': isEnabled
})

Works Everywhere

React

<button className={button({ color: 'primary' })}>
  Click me
</button>

Vue

<button :class="button({ color: 'primary' })">
  Click me
</button>

Svelte

<button class={button({ color: 'primary' })}>
  Click me
</button>

Solid

<button class={button({ color: 'primary' })}>
  Click me
</button>

Ready to Get Started?

Introduction Learn the core concepts and philosophy behind css-variants

Quick Start Build your first variant in under 5 minutes

Tailwind Integration Best practices for using css-variants with Tailwind CSS

Migration from CVA Coming from cva? See what's different and how to migrate