Class Variance Authority (CVA)

Overview

class-variance-authority (0.7.1, the current stable release) exports cva, cx and the VariantProps type. You describe a base string, a set of variants, optional compoundVariants and defaultVariants; calling the result with props returns one class string. It does no CSS conflict resolution, so it is usually paired with clsx and tailwind-merge in a cn() helper. shadcn/ui builds its components this way. A newer rewrite is published as cva (still in beta, 1.0.0-beta.x); this skill covers class-variance-authority.

Instructions

Step 1: Install and add the cn helper

npm install class-variance-authority clsx tailwind-merge

// lib/utils.ts
import { clsx, type ClassValue } from 'clsx'
import { twMerge } from 'tailwind-merge'