Skip to main content

​
Installation

​
Install the package

npm i class-variance-authority

​
Aliasing as cva

Originally, the plan was to publish the package under the shorter name cva, but that name was taken and marked as a placeholder on npm. On 2022/02/16, GitHub transferred npm ownership of cva to Joe Bell. The shorter name will become the primary package name from v1 onwards. In the meantime, you can alias class-variance-authority as cva so your imports use the shorter name today. Step 1. Install with an alias using npm install: 
npm i cva@npm:class-variance-authority
Step 2. Import from the alias: 
import { cva } from "cva";

​
Tailwind CSS

If you use Tailwind CSS, the following optional steps improve your development experience.

​
IntelliSense

Enable Tailwind CSS class autocompletion inside cva and cx calls by adding cva and cx to your editor’s list of class functions.
  1. Install the Tailwind CSS IntelliSense extension
  2. Add the following to your settings.json: 
{
  "tailwindCSS.classFunctions": ["cva", "cx"]
}

​
Handling style conflicts

Although cva’s API is designed to help you avoid styling conflicts, there is still a small margin of error. If you want to eliminate that risk entirely, use tailwind-merge to deduplicate and resolve conflicting Tailwind classes. Wrap your cva component call with twMerge for bulletproof output: 
import { cva, type VariantProps } from "class-variance-authority";
import { twMerge } from "tailwind-merge";

const buttonVariants = cva(["your", "base", "classes"], {
  variants: {
    intent: {
      primary: ["your", "primary", "classes"],
    },
  },
  defaultVariants: {
    intent: "primary",
  },
});

export interface ButtonVariants extends VariantProps<typeof buttonVariants> {}

export const button = (variants: ButtonVariants) =>
  twMerge(buttonVariants(variants));
tailwind-merge is a separate package and must be installed independently: npm i tailwind-merge

Build docs developers (and LLMs) love

Get started for freeTalk to us