recipes/

Folder: styled-system/recipes/
Import: import { button } from '../styled-system/recipes'

Codegen writes one module per config recipe (for example recipes/button.ts) plus recipes/index.ts. Each export is a function: pass variants, get a class name (or a slot map for slot recipes).

import { button } from '../styled-system/recipes'
 
button({ size: 'sm', visual: 'solid' })

These come from theme.recipes / theme.slotRecipes in config (defineRecipe / defineSlotRecipe), not from colocated cva / sva in your components.

Types

Variant types ship next to the recipe:

import { button, type ButtonVariantProps } from '../styled-system/recipes'

Exact type names follow the theme key (button → ButtonVariant / ButtonVariantProps).

Atomic vs config

Full guides

• Recipes overview
• Config Recipe
• Config Slot Recipe
• Slot Recipe
• Atomic Recipe (cva, not this folder)

See also

• cva() · sva()
• jsx/ — recipe context helpers
• Styled System overview