Panda CSS

Panda CSS is a build-time, type-safe styling system for CSS-in-JS. It generates static CSS, so there is no style runtime in the browser.

You write style props and recipes in TypeScript, and the build step outputs CSS organized into cascade layers. Design tokens define colors, spacing and fonts once, and the generated code uses them throughout the project. The output uses modern features such as CSS variables and :where selectors to keep specificity low and predictable. Panda is compatible with React Server Components, so it fits current Next.js and React setups without extra workarounds.

• Style props with TypeScript types
• Design tokens for colors, spacing and fonts
• Recipes for component variants
• Cascade layers and utility classes
• Compatible with React Server Components

React and TypeScript teams that want typed styles without a runtime cost. Developers building a design system with variants will find recipes useful, since each variant is defined once and generated at build time.

Panda CSS is open source under the MIT license, so it is free to use. A build step is required, so you need to set up the Panda tooling in your bundler. The site also links to an official course, and it lists a showcase of projects that use the library.