Documentation Index
Fetch the complete documentation index at: https://mintlify.com/joe-bell/cva/llms.txt
Use this file to discover all available pages before exploring further.
cx is a re-export of clsx. It accepts any number of class values, filters falsy entries, and returns a single concatenated string.
Signature
import { cx } from "cva";
interface CX {
(...inputs: ClassValue[]): string;
}
export type CXOptions = Parameters<CX>; // ClassValue[]
export type CXReturn = ReturnType<CX>; // string
Parameters
Any number of class values. A ClassValue is the union:type ClassValue =
| ClassArray
| ClassDictionary
| string
| number
| bigint
| null
| boolean
| undefined;
type ClassDictionary = Record<string, any>;
type ClassArray = ClassValue[];
false, null, undefined, 0, "") are ignored. Return value
A string of space-separated class names.
Usage
Strings
import { cx } from "cva";
cx("font-bold", "text-lg");
// => "font-bold text-lg"
cx(["font-bold", "text-lg"], "rounded");
// => "font-bold text-lg rounded"
cx("base", { "text-blue-500": true, "text-red-500": false });
// => "base text-blue-500"
const isActive = true;
const isDisabled = false;
cx(
"btn",
isActive && "btn--active",
isDisabled && "btn--disabled",
["rounded", "border"],
);
// => "btn btn--active rounded border"
Using cx with defineConfig
When you create a custom cx via defineConfig, the onComplete hook runs after all inputs are concatenated. This is how tailwind-merge integration works:
import { defineConfig } from "cva";
import { twMerge } from "tailwind-merge";
export const { cx } = defineConfig({
hooks: {
onComplete: (className) => twMerge(className),
},
});
import { cx } from "../lib/utils";
// tailwind-merge resolves conflicts before returning
cx("px-4 py-2", "p-8");
// => "p-8"
defineConfig for the full configuration API.