OSS TanbouOn this page
Overview
Panda CSS is a build-time, type-safe CSS-in-JS framework. It extracts style objects and props from source code, then generates static CSS plus typed utilities, recipes, patterns, and design-token artifacts.
Features and best fit
Based on official documentation; not hands-on tested · Content checked:
Key features
Extract style objects and props during the build
Source scanning finds APIs such as css() and converts their styles into generated CSS and typed helpers rather than a runtime styling engine.
Sources: [1]
Codegen design tokens, recipes, variants, and utilities with types
Token and recipe definitions generate a styled-system layer with TypeScript autocomplete and reusable design-system primitives.
Sources: [1]
Use a Rust/Oxc compiler in Panda v2
Version 2 rewrites the compiler in Rust on the Oxc engine for source parsing and extraction.
Sources: [1]
Best fit
Fits teams that want one type-safe design system across multiple frontend frameworks
Its framework-agnostic styling APIs and token model suit codebases that want consistent utilities and recipes shared across component layers.
Sources: [1]
Before adoption
@pandacss/dev 2.1.1 requires Node 22 or later
The user-facing package declares Node >=22 and offers PostCSS >=8 as an optional peer dependency, so CI toolchains must satisfy those versions.
Sources: [2]
The model depends on styles that can be discovered at build time
Panda is centered on source extraction and code generation rather than arbitrary runtime class creation. Dynamic values should be modeled through tokens, CSS variables, or supported static patterns.
Sources: [1]
Official sources
- [1]Panda CSS 2.1.1 README(2026-10-05)
- [2]@pandacss/dev 2.1.1 package metadata(2026-10-05)
- [3]Panda compiler 2.1.1 release(2026-10-05)
- [4]Panda MIT license(2026-10-05)
Supplemental curator note
Panda v2 rewrites the compiler in Rust on Oxc. The user-facing @pandacss/dev 2.1.1 package requires Node.js >=22, with PostCSS >=8 as an optional peer. v1 implementation guidance should be checked against the v2 upgrade guide.
Try it in 3 steps
- 1
Install Panda CSS 2.1.1 in an isolated project
On Node.js 22 or later, pin the user-facing
@pandacss/devpackage and explicitly install its optional PostCSS peer.demo=$(mktemp -d "${TMPDIR:-/tmp}/panda.XXXXXX") && cd "$demo" && npm init -y >/dev/null && npm install --save-exact --save-dev @pandacss/dev@2.1.1 postcss@8.5.29 - 2
Scaffold Panda config and PostCSS integration
Follow the documented initialization flow to generate Panda and PostCSS configuration.
npx panda init -p - 3
Run codegen and verify the typed styled-system output
Confirm Panda generates typed design-token, utility, and recipe artifacts under
styled-system.npx panda codegen && test -d styled-system && test -n "$(find styled-system -type f -print -quit)"
Growth
Growth trends · Last 30 days
6,208 Stars
Trend data is still being collected.
Built with
Categories and tags
Categories
GitHub data
GitHub dataView detailed GitHub data
GitHub Topics
- atomic-css
- compiler
- css
- css-in-js
- design-system
- design-tokens
- engine
- framework-agnostic
- jit-compiler
- postcss
- styled-system
- theming
Related information
Write a related articleShare a guide or use case for this OSS in Markdown. Articles are published after administrator approval.
Explore next
- Electron123,388 Stars
3 shared tag(s) · 1 shared category(s)
bundle Chromium and Node.js to build desktop applications for three major operating systems with HTML, CSS, and JavaScript
C++ - Ant Design99,682 Stars
3 shared tag(s) · 1 shared category(s)
build enterprise React interfaces quickly with ready-made components, design tokens, theming, and internationalization
TypeScript - Tailwind CSS97,773 Stars
3 shared tag(s) · 1 shared category(s)
Compose utility classes in HTML and components and generate the required CSS at build time
TypeScript - Storybook91,200 Stars
3 shared tag(s) · 1 shared category(s)
capture UI states once and reuse them across docs, interaction tests, and agent tooling
TypeScript - Animate.css82,849 Stars
3 shared tag(s) · 1 shared category(s)
apply reusable CSS animations to UI elements by adding classes
CSS - normalize.css53,505 Stars
3 shared tag(s) · 1 shared category(s)
reduce browser inconsistencies while preserving useful native defaults
CSS
Report incorrect information
Tell us if any listing information is incorrect or outdated.