Features
- Type-safe style props with full autocomplete
- Build-time CSS extraction (zero runtime)
- Design token system with semantic tokens
- Recipes and slot recipes for variant patterns
- RSC-compatible with no client-side JS for styles
Pros
- Type safety and autocomplete for CSS values
- Zero runtime cost — all CSS extracted at build time
- Works with React Server Components
- Rich token and recipe system for design systems
Cons
- Requires a build step and code generation
- Newer project with smaller community
- Configuration can be complex for advanced use cases
Overview
Panda CSS is a CSS-in-JS engine that generates atomic CSS at build time, created by the team behind Chakra UI. It combines the developer experience of CSS-in-JS (type safety, colocation, design tokens) with the performance of atomic CSS (no runtime overhead, small bundles, cacheable styles).
Panda CSS uses a code generation approach — you define your design tokens and patterns in a config file, and Panda generates a type-safe style engine. The css() function, style props, and recipes all produce atomic CSS classes at build time, making it compatible with React Server Components and any framework.
When to Use
Panda CSS is the right choice when you want CSS-in-JS ergonomics without runtime cost, when type safety for styles is important, or when building a design system with tokens and variants. It’s ideal for teams coming from styled-components or Chakra UI who want better performance.
Getting Started
npm install -D @pandacss/dev
npx panda initimport { css } from "../styled-system/css";
function Button() {
return (
<button className={css({ bg: "blue.500", color: "white", px: 4, py: 2, rounded: "md" })}>
Click me
</button>
);
}