Documentation
Getting Started
Extending Components

Extending Components

All cva components provide an optional class or className prop, which can be used to pass additional classes to the component.

// components/button.ts
import { cva } from "class-variance-authority";
 
const button = cva(/* … */);
 
button({ class: "m-4" });
// => "…buttonClasses m-4"
 
button({ className: "m-4" });
// => "…buttonClasses m-4"