chakra-ui/panda

Panda is a build-time atomic CSS library and type-safe CSS-in-JS framework that generates CSS by scanning JavaScript and TypeScript source files during the build process. It ships with a command-line interface for generating and processing styles without requiring framework-specific plugins, and integrates into existing projects through a PostCSS plugin or dedicated framework integrations. The library includes a design token system for defining raw and semantic tokens in configuration, and supports generating CSS for multiple simultaneous themes with type-safe autocomplete.

The library distinguishes itself through its approach to static extraction, producing granular atomic CSS classes at build time that reduce bundle size and eliminate runtime style injection. It provides a recipe-based system for creating multi-variant component styles with type-safe APIs that generate CSS only for variants actually used in source code. Panda supports virtual color palettes that resolve to theme colors at runtime, enabling customizable component colors without re-extraction, and organizes generated styles into cascade layers to control specificity and style precedence predictably.

The project offers extensive configuration and extensibility capabilities, including build hooks and plugins that modify the compilation pipeline, custom conditions for responsive and state-based styling, and the ability to define custom utilities, patterns, and layout primitives. It supports multiple style authoring syntaxes, including object literals and template literals, and provides prop-based styling through JSX components. The library includes slot recipes for styling compound components with multiple named sub-elements, and supports static CSS pre-generation for recipe variants that cannot be extracted from source code.

Documentation and tooling include a design token studio for live visualization of tokens and recipes, a built-in MCP server for making design tokens available to AI coding assistants, and commands for debugging extraction processes and analyzing token usage across a project.