Styled System
Styled System
What’s inside the generated styled-system folder, and where each entrypoint is documented.
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
| Path | Page | Role |
|---|---|---|
css/css | css() | Style object → class name |
css/cva | cva() | Atomic recipes (colocated variants) |
css/sva | sva() | Slot recipes (multi-part) |
css/cx | cx() | Join class name strings |
css/view-transition | viewTransition() | Shared View Transition classes |
patterns/ | patterns | Layout primitive functions |
recipes/ | recipes | Config recipes from your theme |
jsx/ | jsx | styled factory and JSX patterns |
tokens/ | tokens | token() / token.var() in JS |
types/ | 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, orpanda codegenfrom your resolved config. - Not meant to be edited. Customizations belong in
panda.config.tsand 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