class-recipe

class-recipe

Fast, type-safe class name recipes for any CSS approach, with variants, compound variants, slots, and a pluggable join function such as tailwind-merge. It also includes cx, a drop-in replacement for clsx.

Read the documentation

Installation

npm install @lynstack/class-recipe

Requires TypeScript 5.4 or newer for its types, and Node.js 16.9, Bun 1.0, Deno 2.0, or another ES2022 runtime. It ships as an ES module only.

Usage

import { cva } from "@lynstack/class-recipe";

const button = cva({
  base: "inline-flex items-center rounded-md font-medium",
  variants: {
    tone: {
      neutral: "bg-gray-100 text-gray-900",
      danger: "bg-red-600 text-white",
    },
    size: {
      sm: "h-8 px-3 text-sm",
      md: "h-10 px-4",
    },
  },
  defaultVariants: { size: "md" },
});

button({ tone: "danger" });
// => "inline-flex items-center rounded-md font-medium bg-red-600 text-white h-10 px-4"

• cx joins class names, like clsx.
• cva maps variants to the class name of one element.
• sva maps variants to the class names of several elements.
• createRecipes binds them to a join function such as twMerge.

See the Quick start to style a component step by step.

Agent skill

The package ships an agent skill that teaches coding agents to write recipes whose classes never conflict. Install it with the skills CLI:

npx skills add lynstack/recipe --skill class-recipe

See Agent skill for what it teaches and other ways to use it.

Changelog

See CHANGELOG.md.

License

MIT