Skip to content

API Reference

cva

Builds a cva component

import { cva } from "cva";
const component = cva(options);

Parameters

  1. options
    • base: the base class name (string, string[] or other clsx value)
    • variants: your variants schema
    • compoundVariants: variants based on a combination of previously defined variants
    • defaultVariants: set default values for previously defined variants.

Returns

A cva component function

cx

Concatenates class names (an alias of clsx)

import { cx } from "cva";
const className = cx(classes);

Parameters

Returns

string

compose

Shallow merges any number of cva components into a single component.

import { compose } from "cva";
const composedComponent = compose(options);

Parameters

options: array of cva components

Returns

A cva component function

defineConfig

Generate cva, cx and compose functions based on your preferred configuration.

Store in a cva.config.ts file, and import across your project.

cva.config.ts
import { defineConfig } from "cva";
export const { cva, cx, compose } = defineConfig(options);
  1. options
    • hooks
      • onComplete: returns a concatenated class string of all classes passed to cx, cva or compose.