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

The metaConfig parameter is intended for UI/UX library authors to generate JSDoc and CSS Comments when used with unplugin-jade-garden.

styleConfig:
- base: the base class name (ClassValue).
- name: the name of the component that is of type string.
- 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.
metaConfig:
- deprecated: adds a deprecated tag and a description if deprecated is a string string | boolean.
- description: adds a description tag string.
- name: adds a name tag string.
- see: adds a see tag string.

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

createOptions:
- mergeFn: The optional function to merge class names, defaults to cx (MergeFn).
- prefix: The prefix for the class name. Applied when useStylesheet is set to true.
- useStylesheet: Determines if the component returns classes for a stylesheet or not. If true the class name generated is a combination of base and variant keys.

Examples

cva.ts

import { cn, createCVA, type MergeFn } from "jade-garden";
import { twMerge } from "tailwind-merge";

import { button } from "./button.ts";

const cvaCN = createCVA({
  mergeFn: cn
});
cvaCN(button.styleConfig)();
// "rounded-full uppercase"

const cvaStylesheet = createCVA({
  prefix: "jg",
  useStylesheet: true
});
cvaStylesheet(button.styleConfig)({ intent: "primary", size: "medium" });
// "jg:button jg:button__intent--primary jg:button__size--medium"

const cvaTM = createCVA({ mergeFn: twMerge as MergeFn });
cvaTM(button.styleConfig)({ 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"

Edit this pageorReport an issue

Essentials

Jade Garden at a quick glance.

sva

Learn how to style your components with sva functions.