Styled System

styled-system is the package Panda codegen writes for your project (path from config.outdir). You import css, patterns, recipes, and JSX helpers from it.

It is a build artifact, not a style engine. The helpers map style objects to class name strings. The CSS itself comes from extraction. Don't edit these files by hand; regenerate with panda codegen or panda build.

For the mental model (codegen vs extraction), see Why Panda → How it works.

Folder layout

Exact files depend on your config (jsxFramework, recipes, patterns, and so on).

Entrypoints

• css/: css(), cx(), cva(), sva(), viewTransition(), and positionTry(). Style objects to class names.
• patterns/: layout primitive functions.
• recipes/: config recipes from your theme.
• jsx/: the styled factory and JSX patterns.
• tokens/: token() and token.var() in JS.
• types/: generated TypeScript types.

Root files: helpers.js (shared runtime helpers) and styles.css (extracted atomic CSS).

Generation and commit policy

• Written by panda, panda build, or panda codegen from your resolved config.
• Not meant to be edited. Customizations belong in panda.config.ts and your source files.
• Usually gitignored. A design system publishes it through panda lib. See Publishing.

See also

• Why Panda → How it works
• CLI — panda codegen, panda build, panda cssgen
• Config outdir