Class Variance Authority (CVA)

JSON →
library 0.0.0 ·javascript
verified May 27, 2026

Class Variance Authority (CVA) is a tiny, TypeScript-first utility library for defining and resolving UI component variants in a structured, type-safe manner. It allows developers to describe base classes and variant-specific classes, handling the runtime resolution based on provided props. CVA supports features like compound variants, default variants, and provides a `VariantProps` utility type for extracting TypeScript prop types. Currently, the stable package is `class-variance-authority`, with version 0.7.1 as of the latest npm publish over a year ago. While the `cva` package name exists, it's a placeholder, and the official project intends to use `cva` as the primary name from v1 onwards. It is framework-agnostic (works with React, Vue, Svelte, plain HTML) and CSS-agnostic (Tailwind CSS, CSS Modules, plain classes), making it highly flexible. Its small bundle size (approx. 1.6 KB minified + gzipped) and lack of runtime style injection are key differentiators against CSS-in-JS solutions, providing full control over stylesheet output.

total hits 23
actors 6 distinct systems
last hit 4d ago AhrefsBot
ByteDance
10
MetaBot
4
GPTBot
2
ChatGPT-User
2
Script
1

top countries 🇸🇬 Singapore · 🇺🇸 United States · 🇨🇦 Canada · 🇩🇪 Germany · 🇫🇷 France