Skip to main content

​
Types

All types are exported from the cva package and can be imported directly. 
import type {
  ClassValue,
  ClassDictionary,
  ClassArray,
  VariantProps,
  CX,
  CXOptions,
  CXReturn,
  CVA,
  Compose,
  DefineConfig,
  DefineConfigOptions,
} from "cva";

​
ClassValue

The union of all valid inputs accepted by cx and the base, variants, and compoundVariants fields of cva. 
export type ClassValue =
  | ClassArray
  | ClassDictionary
  | string
  | number
  | bigint
  | null
  | boolean
  | undefined;

​
ClassDictionary

An object whose values determine whether each key (a class name) is included. Truthy values include the class; falsy values exclude it. 
export type ClassDictionary = Record<string, any>;

​
ClassArray

A recursive array of ClassValue items. Useful for grouping related classes. 
export type ClassArray = ClassValue[];

​
VariantProps

A utility type that extracts the variant prop types from a CVA component function. The class and className props are omitted from the result. 
export type VariantProps<Component extends (...args: any) => any> = Omit<
  OmitUndefined<Parameters<Component>[0]>,
  "class" | "className"
>;
Usage 
import { cva, type VariantProps } from "cva";

const button = cva({
  base: "btn",
  variants: {
    intent: { primary: "btn--primary", secondary: "btn--secondary" },
    size: { sm: "btn--sm", lg: "btn--lg" },
  },
});

type ButtonProps = VariantProps<typeof button>;
// => { intent?: "primary" | "secondary"; size?: "sm" | "lg" }

​
CX

The interface for the cx function. 
export interface CX {
  (...inputs: ClassValue[]): string;
}

​
CXOptions

The parameter type of CX. Equivalent to ClassValue[]. 
export type CXOptions = Parameters<CX>;

​
CXReturn

The return type of CX. Always string. 
export type CXReturn = ReturnType<CX>;

​
CVA

The interface for the cva function. 
export interface CVA {
  <
    _ extends "cva's generic parameters are restricted to internal use only.",
    V,
  >(
    config: V extends CVAVariantShape
      ? CVAConfigBase & {
          variants?: V;
          compoundVariants?: (V extends CVAVariantShape
            ? (
                | CVAVariantSchema<V>
                | {
                    [Variant in keyof V]?:
                      | StringToBoolean<keyof V[Variant]>
                      | StringToBoolean<keyof V[Variant]>[]
                      | undefined;
                  }
              ) &
                CVAClassProp
            : CVAClassProp)[];
          defaultVariants?: CVAVariantSchema<V>;
        }
      : CVAConfigBase & {
          variants?: never;
          compoundVariants?: never;
          defaultVariants?: never;
        },
  ): (props?: V extends CVAVariantShape
    ? CVAVariantSchema<V> & CVAClassProp
    : CVAClassProp) => string;
}

​
Compose

The interface for the compose function. 
export interface Compose {
  <T extends ReturnType<CVA>[]>(
    ...components: [...T]
  ): (
    props?: (
      | UnionToIntersection<
          {
            [K in keyof T]: VariantProps<T[K]>;
          }[number]
        >
      | undefined
    ) &
      CVAClassProp,
  ) => string;
}

​
DefineConfig

The interface for the defineConfig function. 
export interface DefineConfig {
  (options?: DefineConfigOptions): {
    compose: Compose;
    cx: CX;
    cva: CVA;
  };
}

​
DefineConfigOptions

The options object accepted by defineConfig. 
export interface DefineConfigOptions {
  hooks?: {
    /**
     * @deprecated Use `onComplete` instead.
     */
    "cx:done"?: (className: string) => string;
    /**
     * Returns the completed string of concatenated classes/classNames.
     */
    onComplete?: (className: string) => string;
  };
}

Build docs developers (and LLMs) love

Get started for freeTalk to us