API Reference

Caution

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

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

• classes: array of classes to be concatenated (see clsx usage)

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.