Getting started
Theming
Identities, curated palettes, and density under non-16px roots.
Overview
Stalk UI ships recipes, semantic tokens, and themes through @stalk-ui/preset. Use data-panda-theme="rainbow" or data-panda-theme="monochrome" on the whole app or a subtree for the alternate identities.
Curated palettes. Eight accent/gray palettes ship in the preset — blue, violet, teal, emerald, amber, yellow, orange, red. Palette CSS is opt-in: list the ones you use under staticCss.themes in panda.config.ts, then apply with data-panda-theme="emerald". Run stalk-ui theme to list everything.
Density and root font size. The sizes and spacing tokens are rem-valued, named for their pixel value at a 16px root. A dense app pinning html { font-size: 14px } scales every control coherently (the 32 token renders 28px) — the trap is mixing units: a hand-written height: 32px sits 4px proud of recipe-sized controls. Size custom controls with the same tokens the recipes use (minH: '32'), never raw px.
Theme switcher
Preview the built-in theme attribute before applying it to an app or subtree.
Components keep the same semantic token names while the theme remaps values.
Attribute
<html>