What's New?
What’s changed since class-variance-authority@0.*?
Features
Section titled “Features”1. compose
Section titled “1. compose”Shallow merge any number of cva components into a single component via the new compose method.
2. defineConfig
Section titled “2. defineConfig”Extend cva via the new defineConfig API.
Want to use cva/cx with tailwind-merge? No problem!
Enhancements
Section titled “Enhancements”1. class-variance-authority → cva
Section titled “1. class-variance-authority → cva”One of the biggest – and let’s be honest, most important – complaints about class-variance-authority was that the name was just too damn long.
Shout-out to GitHub for transferring npm ownership of cva!
2. cva now accepts a single parameter
Section titled “2. cva now accepts a single parameter”Base styles are now applied via the named base property.
import { cva } from "class-variance-authority"; import { cva } from "cva";
const component = cva({ base: "your-base-class" });3. Goodbye null
Section titled “3. Goodbye null”Previously, passing null to a variant would disable a variant completely – to match the behaviour of Stitches.js – however this caused a great deal of confusion.
Instead, we now recommend explicitly rolling your own unset variant.
4. Clearer Type Guards
Section titled “4. Clearer Type Guards”cva uses generic type parameters to infer variant types, but this was often confused as something that could be customized.
If you attempt to pass a generic type parameter, cva will now throw an error.