What is Panda CSS?

Panda CSS is a styling library that generates static CSS at build time while letting you write styles in TypeScript. It is designed for teams that want the ergonomics of CSS-in-JS — style props, variants, recipes — without shipping a runtime to the browser. According to the project's own description, it is "CSS-in-JS with build time generated styles, RSC compatible, multi-variant support," and it advertises zero runtime, type safety, and a low learning curve. If you are building a modern React app (including one that uses Server Components) and want type-checked styles that compile down to plain CSS, Panda CSS is aimed at you.

The core idea: write in TS, ship static CSS

Most CSS-in-JS libraries resolve styles in the browser at runtime. Panda CSS moves that work to your build step. You author styles using its APIs, and the build produces a static stylesheet plus a generated styled-system folder that your components import from.

The practical consequence: the browser receives ordinary CSS files, not a style-injection engine. That is what "zero runtime" means here — the styling logic does not execute in the user's browser.

How you write styles

Panda CSS exposes several authoring styles, and the homepage demonstrates three of them side by side.

Style functions

You import functions like css and pattern helpers such as stack and circle from the generated styled-system directory:

import { css } from "./styled-system/css";
import { circle, stack } from "./styled-system/patterns";

function App() {
  return (
    <div className={stack({ direction: "row", p: "4" })}>
      <div className={circle({ size: "5rem", overflow: "hidden" })}>
        <img src="https://via.placeholder.com/150" alt="avatar" />
        <div className={css({ mt: "4", fontSize: "xl", fontWeight: "semibold" })}>
          John Doe
        </div>
      </div>
    </div>
  );
}

Here p: "4", mt: "4", and fontSize: "xl" are design-token values, not raw CSS strings — which is where the type safety comes from.

Style props on JSX components

Panda also generates JSX components (Box, Stack, Circle) that accept style props directly:

import { Box, Stack, Circle } from "./styled-system/jsx";

function App() {
  return (
    <Stack direction="row" p="4" rounded="md" shadow="lg" bg="white">
      <Circle size="5rem" overflow="hidden">
        <img src="https://via.placeholder.com/150" alt="avatar" />
        <Box mt="4" fontSize="xl" fontWeight="semibold">John Doe</Box>
      </Circle>
    </Stack>
  );
}

Recipes for multi-variant components

For components with variants (buttons, badges, alerts), Panda provides cva and styled:

import { styled } from "./styled-system/jsx";
import { cva } from "./styled-system/css";

export const badge = cva({
  base: { fontWeight: "medium", borderRadius: "md" },
  variants: {
    status: {
      default: { color: "white", bg: "gray.500" },
      success: { color: "white", bg: "green.500" },
    },
  },
});

export const Badge = styled("span", badge);

This is the pattern to reach for when a single component needs several visual states driven by props.

What you get, and what it costs you

The trade-off is a build step and a generated styled-system directory that your imports depend on. You are not writing plain CSS files by hand; you are writing Panda's APIs and letting the build emit the CSS. In exchange, style values are checked against your tokens and variants at compile time rather than failing silently at runtime.

When Panda CSS is a good fit

• You want type-safe styles and are willing to adopt a build-time tool.
• You are using React Server Components and need a styling approach that does not rely on client-side injection.
• You want variant-driven component styling (recipes) as a first-class feature.
• You prefer design tokens and utility-style values over ad-hoc CSS.

It is a weaker fit if you want to avoid a build pipeline entirely, or if you are not using TypeScript and would not benefit from the type checking that is central to its value.

Getting started

The install command shown on the site is:

npm i -D @pandacss/dev

From there, the site points to a Get Started path and a set of Guides. There is also an interactive Playground and a Showcase of projects built with it. The project notes that Panda CSS v2.0 has been released, so check the docs for the current version's setup steps rather than assuming older instructions apply.

For learning, the team behind Panda CSS created an official course at pandamastery.com, positioned as a way to skip straight past the docs if you prefer guided instruction.