panda

Panda is a styling solution for modern web development, described as universal, type-safe, and scalable CSS-in-JS. It works at build time, extracting style objects or style props into CSS. Key features include: writing style objects or style props that are extracted at build time; modern CSS output using cascade layers @layer and CSS variables; compatibility with most JavaScript frameworks; recipes and variants similar to Stitches; high-level design tokens for simultaneous themes; and type-safe styles with autocomplete via codegen. Installation is via npm: npm i -D @pandacss/dev, then npx panda init -p to scaffold config and postcss. The entry CSS file should contain @layer reset, base, tokens, recipes, utilities; and be imported in the app. Usage example: import { css } from '../styled-system/css'; import { stack, vstack, hstack } from '../styled-system/patterns'; then use class names like hstack({ gap: '30px', color: 'pink.300' }) or css({ fontSize: 'lg', color: 'red.400' }). The monorepo includes packages such as cli, core, config, extractor, generator, parser, is-valid-prop, node, token-dictionary, and shared. The project provides documentation at panda-css.com, a StackBlitz playground, a contributing guide, and a Discord community. It is MIT licensed. The README acknowledges inspiration from Chakra UI, Vanilla Extract, Stitches, Tailwind CSS, Class Variance Authority, Styled System, Linaria, Uno CSS, and Goober.