Usage
cva
Learn how to style your components with cva functions.
You can import cva functions from jade-garden/cva.
cva
Implementation of the class variant authority (cva) function using the default class merging function (cx).
Parameters
options:base: the base class name (ClassValue).name: the name of the component that is of typestring(required for use ingetClassesandunplugin-jade-garden).variants: variants allow you to create multiple versions of the same component.compoundVariants: compound variants allow you to apply classes to multiple variants at once.defaultVariants: default variants allow you to set default variants for a component.
Examples
variants.ts
import { cva } from "jade-garden/cva";
const button = cva({
base: "rounded border font-semibold",
// **or**
// base: ["font-semibold", "border", "rounded"],
variants: {
intent: {
primary: "border-transparent bg-blue-500 text-white hover:bg-blue-600",
// **or**
// primary: [
// "bg-blue-500",
// "text-white",
// "border-transparent",
// "hover:bg-blue-600",
// ],
secondary: "border-gray-400 bg-white text-gray-800 hover:bg-gray-100"
},
size: {
small: "px-2 py-1 text-sm",
medium: "px-4 py-2 text-base"
}
}
});
button();
// "font-semibold border rounded"
button({ intent: "secondary", size: "small" });
// "font-semibold border rounded bg-white text-gray-800 border-gray-400 hover:bg-gray-100 text-sm py-1 px-2"
createCVA
Creates a class variant authority (cva) function with a custom merge function.
Parameters
Examples
cva.ts
import { cn, createCVA, type MergeFn } from "jade-garden";
import { twMerge } from "tailwind-merge";
import { buttonConfig } from "./button.ts";
const cvaCN = createCVA(cn);
cvaCN(buttonConfig)();
// "rounded-full uppercase"
const cva = createCVA();
cva(buttonConfig)();
// "rounded-full uppercase bg-blue-500 text-white border-transparent hover:bg-blue-600 text-base py-2 px-4"
const cvaTM = createCVA(twMerge as MergeFn);
cvaTM(buttonConfig)({ className: ["lowercase", "text-black", "py-4", "px-8"] });
// "rounded-full lowercase bg-blue-500 text-black border-transparent hover:bg-blue-600 text-base py-4 px-8"
defineCVA
Defines a type-safe structure for a cva configuration object.
Parameters
options:base: the base class name (ClassValue).name: the name of the component that is of typestring(required for use ingetClassesandunplugin-jade-garden).variants: variants allow you to create multiple versions of the same component.compoundVariants: compound variants allow you to apply classes to multiple variants at once.defaultVariants: default variants allow you to set default variants for a component.
Examples
import { defineCVA } from "jade-garden/cva";
/**
* CVAConfig<{
* intent: {
* primary: string[];
* secondary: string[];
* };
* size: {
* small: string[];
* medium: string[];
* };
* }>
*/
export const buttonConfig = defineCVA({
name: "button",
base: "rounded-full",
variants: {
intent: {
primary: [
"bg-blue-500",
"text-white",
"border-transparent",
"hover:bg-blue-600"
],
secondary: [
"bg-white",
"text-gray-800",
"border-gray-400",
"hover:bg-gray-100"
]
},
size: {
small: [
"text-sm",
"py-1",
"px-2"
],
medium: [
"text-base",
"py-2",
"px-4"
]
}
},
compoundVariants: [
{
intent: "primary",
size: "medium",
class: "uppercase"
}
],
defaultVariants: {
intent: "primary",
size: "medium"
}
});