Why Panda

What is Panda

Panda is a styling engine. You write styles in TypeScript, and Panda generates plain atomic CSS at build time.

It reads your source rather than running in the browser: static analysis picks up JSX style props and function calls, and only the styles you actually used end up in the stylesheet. You get the authoring experience of CSS-in-JS without shipping a style engine to your users.

There is more than one way to write it. Every tab below produces the same atomic CSS.

import { css } from '../styled-system/css'
 
export function Card() {
  return (
    <div className={css({ display: 'flex', gap: '4', p: '4', rounded: 'md', bg: 'white' })}>
      <img className={css({ w: '12', h: '12', rounded: 'full' })} src="/avatar.png" alt="" />
      <span className={css({ fontWeight: 'semibold' })}>John Doe</span>
    </div>
  )
}

import { styled } from '../styled-system/jsx'
 
export function Card() {
  return (
    <styled.div display="flex" gap="4" p="4" rounded="md" bg="white">
      <styled.img w="12" h="12" rounded="full" src="/avatar.png" alt="" />
      <styled.span fontWeight="semibold">John Doe</styled.span>
    </styled.div>
  )
}

import { hstack, circle } from '../styled-system/patterns'
 
export function Card() {
  return (
    <div className={hstack({ gap: '4', p: '4', rounded: 'md', bg: 'white' })}>
      <img className={circle({ size: '12' })} src="/avatar.png" alt="" />
      <span>John Doe</span>
    </div>
  )
}

import { cva } from '../styled-system/css'
 
const card = cva({
  base: { display: 'flex', gap: '4', rounded: 'md', bg: 'white' },
  variants: {
    size: { sm: { p: '2' }, md: { p: '4' } }
  },
  defaultVariants: { size: 'md' }
})
 
export function Card({ size }) {
  return <div className={card({ size })}>John Doe</div>
}

How it works

Panda runs two passes at build time, so the browser never computes styles:

1. Codegen reads your config and writes the styled-system package you import from.
2. Extract scans your source for those calls and emits only the CSS you used.

  panda.config.ts                 css({ color: 'blue.500' })
         │                                    │
         ▼                                    ▼
      codegen                              extract
         │                                    │
         ▼                                    ▼
  styled-system/                         styles.css
  (css, cva, …)                     .color_blue\.500 { … }
         │                                    │
         └────────────────┬───────────────────┘
                          ▼
                       browser
              class name string + static CSS

Values have to be visible in source. If a style only exists at runtime, see Dynamic Styles. Folder details: Styled System.

What you get

• Static analysis: Panda parses your styles at build time and generates plain CSS files that work in any JavaScript framework.
• Type safety: Panda combines csstype with auto-generated typings, so CSS properties and design tokens are type-checked as you write them.
• Performance: styles compile down to atomic CSS ahead of time, so there's no runtime style engine shipped to the browser.
• Developer experience: recipes, patterns, design tokens, and JSX style props give you a consistent way to author styles without hand-rolling your own system.
• Modern CSS: generated styles use cascade layers, CSS variables, and modern selectors like :where and :is.

Where to go next

Panda installs as a CLI tool, a PostCSS plugin, through a framework-specific guide, or inside Storybook.

Playground

You can use the online playground (opens in a new tab) to get a taste of what Panda can do.

• See the live results of your JSX code
• Inspect what panda can extract using static analysis from your code
• Preview the statically generated .css files

Acknowledgement

The development of Panda was only possible due to the inspiration and ideas from these amazing projects.

• Chakra UI (opens in a new tab) - where it all started
• Vanilla Extract (opens in a new tab) - for inspiring the utilities API
• Stitches (opens in a new tab) - for inspiring the recipes and variants API
• Tailwind CSS (opens in a new tab) - for inspiring the JIT compiler and strategy
• Class Variance Authority (opens in a new tab) - for inspiring the cva name
• Styled System (opens in a new tab) - for the initial idea of Styled Props
• Linaria (opens in a new tab) - for inspiring the initial atomic css strategy
• Uno CSS (opens in a new tab) - for inspiring the studio and astro integration