Components Overview

Component recipes are pre-built, composable styling patterns for common UI elements. They combine design tokens, variants, and compound variants into reusable, type-safe style definitions that you can drop into any project.

Why Use Component Recipes?

Styleframe's recipe system offers several key advantages:

• Variant-Driven Styling: Define colors, sizes, and visual styles as composable variants
• Compound Variants: Automatically resolve styles based on variant combinations (e.g., primary + solid)
• Type Safety: Full TypeScript support with auto-complete for all variant options
• Customizable: Override any default using the createUseRecipe factory pattern
• Design Token Integration: All recipes reference your design token variables, so theme changes propagate automatically

Quick Start

Here's a minimal example using the badge recipe:

import { styleframe } from 'styleframe';
import { useBadgeRecipe } from '@styleframe/theme';

const s = styleframe();

const badge = useBadgeRecipe(s);

export default s;

The recipe generates CSS class names that you apply to your HTML elements:

<span class="badge badge--primary badge--solid badge--sm">New</span>

Available Components

Badge

A small labeling component for status indicators, counts, and categorization.

Variants: 6 colors, 4 styles, 5 sizes

Learn more about Badge →