What's New?

Caution

You are currently viewing the docs for cva@beta
For stable documentation, please visit cva.style.

What’s changed since class-variance-authority@0.*?

Features

1. compose

Shallow merge any number of cva components into a single component via the new compose method.

2. defineConfig

Extend cva via the new defineConfig API.

Want to use cva/cx with tailwind-merge? No problem!

Enhancements

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

Base styles are now applied via the named base property.

• Before

  import { cva } from "class-variance-authority";
  
  const before = cva("your-base-class");

• After

  import { cva } from "cva";
  
  const after = cva({ base: "your-base-class" });

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

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.