cva presets

button, badge, card, and input presets from @chroma/style — variants, defaults, and composition with the Chroma engine.

Presets are cva configurations created by createVariants(cva) in variants.js. They use utility class names from utilities.css and follow the same resolution rules as hand-written cva configs in Components.

You obtain them from:

const { presets } = globalThis.__chromaStyle;
// or
import { createVariants } from "../plugins/chroma-style/variants.js";
import { cva } from "../pkg/chroma.js";
const presets = createVariants(cva);

bootstrapStyle returns presets: null if you omit cva.

Variant reference

`button`

Group	Options	Default
`variant`	`primary`, `secondary`, `outline`, `ghost`, `destructive`	`primary`
`size`	`sm`, `md`, `lg`	`md`

Base classes include inline-flex, focus-ring, disabled:opacity-50, and border utilities.

e("button", {
  class: presets.button({ variant: "outline", size: "sm", onClick: save }),
}, "Save");

`badge`

Group	Options	Default
`variant`	`default`, `secondary`, `outline`, `destructive`	`default`

`card`

Group	Options	Default
`padding`	`none`, `sm`, `md`	`md`
`shadow`	`none`, `sm`, `md`, `lg`	`sm`

e("section", { class: presets.card({ shadow: "md", padding: "md" }) }, children);

`input`

Group	Options	Default
`invalid`	`true` → adds `border-destructive`	unset

e("input", {
  class: presets.input({ invalid: props.hasError }),
  type: "text",
  value: props.value,
});

Composition patterns

Thin wrapper component

// src/components/Button.chr
import { e } from "../../pkg/chroma.js";

const { presets } = globalThis.__chromaStyle;

export function Button(props) {
  return e(
    "button",
    {
      class: presets.button(props),
      onClick: props.onClick,
      disabled: props.disabled,
      type: props.type ?? "button",
    },
    props.children,
  );
}

Callers pass variant, size, and class (layout overrides resolve last).

`tw` for conditional utilities

createTw(cx) merges class fragments — use when you are not inside a single preset call:

const { tw, presets } = globalThis.__chromaStyle;

e("p", {
  class: tw("text-sm", "text-muted-foreground", isActive() && "text-primary"),
});

Engine demo showcase

The Chroma/example hooks demo renders a full matrix of button and badge variants plus an input preset (see StyleShowcase in example/index.html). Copy that section when prototyping before extracting components.

Presets vs local `cva`

Use presets when	Use local `cva` when
Standard button/card/badge/input	Domain-specific variants (`tone: info \| error`)
You want defaults aligned with tokens	Classes are app-specific (`.taf-*`)
Prototyping in a new app	You need `compoundVariants` not in presets

Both accept class / className last for overrides.

Deprecated alias

createPresets is an alias for createVariants kept for older examples. Prefer createVariants.

Styling guide — Presets
Utilities — class names inside preset configs

cva presets

On this page