# chakra-ui/panda

🐼 Universal, Type-Safe, CSS-in-JS Framework for Design Systems ⚡️

Repository: https://github.com/chakra-ui/panda
Canonical: https://ross.abutalabs.com/products/panda
Homepage: https://panda-css.com
Language: TypeScript
License: MIT
License Family: permissive
Topics: css, styled-system, typescript, utility-classes, design-system, framework-agnostic, postcss, atomic-css, css-in-js, engine, jit-compiler, compiler, design-tokens, theming
Last push: 2026-08-25T12:08:10+00:00

## Health v2 (maintenance only)
Score: 94/100 (v2, computed 2026-09-03T02:39:23.370411+00:00)
- activity 99, release rhythm 83, longevity 100
- inputs: {"age_days": 1498, "days_push": 8, "days_rel": 35, "gap_med": 0, "n_releases_24m": 1050}
- flags: none
- formula: round(0.45*activity + 0.35*rhythm + 0.20*longevity); archived -> min(score, 10)

## Adoption (not part of the score)
Stars 6163, forks 312 (observed 2026-08-28T04:09:36.770251+00:00)

## What it is
Panda is a universal, type-safe CSS-in-JS styling engine that generates atomic CSS at build time via static analysis of your JavaScript/TypeScript source. It combines the developer experience of CSS-in-JS with the performance of atomic CSS, supporting design tokens, recipes, and most JS frameworks.

## Use cases
- generate atomic css at build time from style props
- create type-safe multi-variant component styles
- manage design tokens and themes across a design system
- style a react or vue app without runtime css-in-js overhead
- extract styles from jsx using static analysis
- build a framework-agnostic styling solution for a component library

## When to choose
- you want css-in-js ergonomics with zero runtime cost
- you need type-safe styles with autocomplete in typescript
- you're building a design system with tokens, recipes, and variants
- you use react server components or a framework where runtime css-in-js is problematic
- you want atomic css output with cascade layers

## When to avoid
- you prefer plain css or a utility-first framework like tailwind without codegen
- your project doesn't use a javascript bundler or build step
- you need runtime dynamic styling based on user input at runtime
- your team is unwilling to adopt generated styled-system artifacts in the repo

## Facets
- artifact type: library
- maturity: active
- function: css-framework, build-tool, templating, developer-tools
- domain: web-development, frontend, web-design, developer-tools
- platform: cross-platform, cli
- tags: css-in-js, atomic-css, design-tokens, design-systems, type-safe, postcss, jit-compiler, zero-runtime, recipes, theming, nodejs, web-server

## Member repositories
- chakra-ui/panda (main) score 94

## Provenance
- Observed fields: from GitHub, fetched 2026-08-28T04:09:36.770251+00:00.
- Health v2: computed from the inputs above; adoption is never an input.
- Inferred fields (summary, facets, guidance): AI-extracted, prompt v1, taxonomy v1, on 2026-08-29T17:47:28.225360+00:00, confidence not recorded.
  - readme: https://github.com/chakra-ui/panda (fetched 2026-08-28T04:09:36.770251+00:00, sha 8df1a3ccbe59)
  - homepage: https://panda-css.com (fetched 2026-08-29T08:44:38.462776+00:00, sha 38b6aae74cfc)
  - site_page: https://panda-css.com/docs (fetched 2026-08-29T08:44:38.472210+00:00, sha 708caafb0cd6)
  - site_page: https://panda-css.com/docs/concepts/cascade-layers (fetched 2026-08-29T08:44:38.474072+00:00, sha 7922f39803a4)
  - site_page: https://panda-css.com/docs/theming/tokens (fetched 2026-08-29T08:44:38.475851+00:00, sha bc7d1ad4705a)
  - site_page: https://panda-css.com/docs/concepts/recipes (fetched 2026-08-29T08:44:38.477681+00:00, sha 3633225b063f)
- Data as of 2026-08-30T08:39:29.467469+00:00.