explaingit

joe-bell/cva

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

TLDR

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

Things people build with this

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.

Tech stack

TypeScriptnpm

Getting 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.

In plain English

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].
Open on GitHub → Explain another repo

← joe-bell on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.