joe-bell/cva

Health v2 · maintenance only

Adoption not part of the score

6880 stars · 136 forks observed · 2026-08-28

What it is AI-extracted, prompt v1, taxonomy v1, 2026-08-29, confidence not recorded

Class Variance Authority (cva) is a tiny TypeScript library for building type-safe, variant-driven class names for UI components, with first-class Tailwind CSS support. It handles variant props, compound variants, and defaults so developers don't have to manually match classes to props.

Use cases

• create type-safe component variants in react
• manage tailwind css button variants
• build a design system with variant-driven class names
• avoid manually mapping props to css classes
• extract variant prop types with typescript
• compose and extend styled ui components

When to choose

• you use Tailwind CSS or write your own CSS and want type-safe variants
• you want a tiny, framework-agnostic alternative to CSS-in-TS libraries like Stitches
• you need compound variants and default variant values
• you want full control over your stylesheet output

When to avoid

• you want responsive variants built in - cva doesn't support them
• you prefer a styled API or CSS-in-TS solution like Stitches or Vanilla Extract
• you need component composition handled for you out of the box

Facets

library · maturity stable

ui-components css-framework frontend-framework type-system frontend web-development web-design bun browser cross-platform tailwind-css class-names variants typescript design-systems component-variants nodejs deno

Member repositories

For agents

markdown · JSON · MCP: product_card(name="joe-bell/cva")