Welcome to Panda

The universal design system solution for the web

Panda is a styling engine that generates styling primitives to author atomic CSS and recipes in a type-safe and readable manner.

Panda combines the developer experience of CSS-in-JS and the performance of atomic CSS. It leverages static analysis to scan your JavaScript and TypeScript files for JSX style props and function calls, generating styles on-demand (aka Just-in-Time)

💡

TLDR; Panda is a CSS-in-JS engine that generates atomic CSS at build time (via CLI or PostCSS)

Why Panda

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.

Here's what using Panda looks like in practice:

import { css } from '../styled-system/css'
import { circle, stack } from '../styled-system/patterns'
 
function App() {
  return (
    <div
      className={stack({
        direction: 'row',
        p: '4',
        rounded: 'md',
        shadow: 'lg',
        bg: 'white'
      })}
    >
      <div className={circle({ size: '5rem', overflow: 'hidden' })}>
        <img src="https://via.placeholder.com/150" alt="avatar" />
      </div>
      <div className={css({ mt: '4', fontSize: 'xl', fontWeight: 'semibold' })}>John Doe</div>
      <div className={css({ mt: '2', fontSize: 'sm', color: 'gray.600' })}>john@doe.com</div>
    </div>
  )
}

Installation

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

Installation

Pick the setup that matches your project

Next Steps

Get familiar with the core features and concepts in Panda.

Tokens

Learn how setup and customize design tokens to customize your colors, typography, and more

Recipes

Create composable style variants that are typed and generates the atomic or layer recipe

Patterns

Use the built-in layout patterns like stack, flex, grid to speed up your development

Utilities

Learn how to create your own custom css properties and speed up your development

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

Get Started

Installation