Installation

pnpm

pnpm i class-variance-authority

npm

npm i class-variance-authority

yarn

yarn add class-variance-authority

bun

bun add class-variance-authority

deno

deno add class-variance-authority

Do I really have to write such a long package name?

Unfortunately, for a little bit longer, yes. Originally, the plan was to publish the package as cva, but this name was taken and marked as a “placeholder”.

On 2022/02/16, GitHub transferred NPM ownership of cva to Joe Bell. This shorter name will be used from v1 onwards.

In the meantime, you can always alias the package for your convenience…

1. Alias the package with npm install

   npm i cva@npm:class-variance-authority

2. Then import like so:

   import { cva } from "cva";
   
   // …

Tailwind CSS

If you’re a Tailwind user, here are some additional (optional) steps to get the most out of cva:

IntelliSense

You can enable autocompletion inside cva using the steps below:

Visual Studio Code

1. Install the “Tailwind CSS IntelliSense” Visual Studio Code extension

2. Add the following to your settings.json:

{
  "tailwindCSS.classFunctions": ["cva", "cx"]
}

Zed

Add the following to your .zed/settings.json:

{
  "lsp": {
    "tailwindcss-language-server": {
      "settings": {
        "classFunctions": ["cva", "cx"],
      }
    }
  }
}

Neovim

1. Install the extension

2. Add the following configuration:

require 'lspconfig'.tailwindcss.setup({
  settings = {
    tailwindCSS = {
      classFunctions = { "cva", "cx" },
    },
  },
})

WebStorm

1. Check the version. Available for WebStorm 2023.1 and later

2. Open the settings. Go to Languages and Frameworks | Style Sheets | Tailwind CSS

3. Add the following to your tailwind configuration

{
  "classFunctions": ["cva", "cx"]
}

Handling Style Conflicts

Although cva’s API is designed to help you avoid styling conflicts, there’s still a small margin of error.

If you’re keen to lift that burden altogether, check out the wonderful tailwind-merge package.

For bulletproof components, wrap your cva component with twMerge.

Example with tailwind-merge

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));