whatisgithub

What is cva?

joe-bell/cva — explained in plain English

Analysis updated 2026-06-24

★ 6,828TypeScriptAudience · developerComplexity · 2/5LicenseSetup · easy

In one sentence

Small TypeScript library for managing CSS class name variations in UI components. Define all the style options for a button or card, like size, color, or outline, in one place with full TypeScript type safety.

Mindmap

mindmap
  root((CVA))
    What it does
      Manage CSS classes
      Define UI variants
      Type-safe props
    Use Cases
      Button variants
      Design systems
      Component libraries
    Tech Stack
      TypeScript
      npm package
      Apache 2.0
    Features
      Compile-time checks
      Minimal bundle size
      Framework agnostic
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

What do people build with it?

USE CASE 1

Define all visual variants of a button component, size, color, and style, in one structured place instead of scattered conditional logic.

USE CASE 2

Build a design system where each component's class name combinations are validated at compile time so typos and mismatches are caught early.

USE CASE 3

Replace ad-hoc class name string concatenation in React or Vue components with a readable, type-safe variant API.

What is it built with?

TypeScriptnpm

How does it compare?

joe-bell/cvanodejs/nodejs.orgritwickdey/vscode-live-server
Stars6,8286,8306,819
LanguageTypeScriptTypeScriptTypeScript
Setup difficultyeasymoderateeasy
Complexity2/53/51/5
Audiencedeveloperdeveloperdeveloper

Figures from each repo's GitHub metadata at analysis time.

How do you get it running?

Difficulty · easy Time to first run · 5min
Use freely for any purpose including commercial, as long as you include the license notice. Apache 2.0.

So what is it?

CVA, short for Class Variance Authority, is a small TypeScript library for managing CSS class names in user interface components. When building UI components that can appear in different styles depending on context, such as a button that might be large or small, filled or outlined, or in a primary or danger color, you end up writing logic to combine the right class names based on those choices. CVA gives you a structured way to define those variations so the logic stays consistent and readable. The library is distributed as an npm package under the name class-variance-authority. It includes TypeScript type definitions, which means the types of your component variants are checked at compile time rather than discovered only when something breaks at runtime. The package is designed to stay small: the bundled and compressed size is minimal, making it practical to include in frontend projects where download size matters. The README for this repository is sparse and points readers to the documentation site at cva.style for actual usage instructions and examples. The project is licensed under Apache 2.0.

Copy-paste prompts

Prompt 1
Using class-variance-authority, write a TypeScript Button component with size variants (sm, md, lg) and intent variants (primary, danger, ghost) using Tailwind CSS classes.
Prompt 2
Show me how to combine CVA variants with Tailwind CSS to build a reusable Card component that has outlined and filled styles.
Prompt 3
How do I use CVA's TypeScript types so my IDE autocompletes the available variant options when I pass props to a component?
Prompt 4
Refactor this ad-hoc className string logic into a CVA variant definition: [paste your code here].

Frequently asked questions

What is cva?

Small TypeScript library for managing CSS class name variations in UI components. Define all the style options for a button or card, like size, color, or outline, in one place with full TypeScript type safety.

What language is cva written in?

Mainly TypeScript. The stack also includes TypeScript, npm.

What license does cva use?

Use freely for any purpose including commercial, as long as you include the license notice. Apache 2.0.

How hard is cva to set up?

Setup difficulty is rated easy, with roughly 5min to a first successful run.

Who is cva for?

Mainly developer.

Open on GitHub → Ask about another repo

This repo across BitVibe Labs

Verify against the repo before relying on details.

What are similar repos?