How to Get Started with Panda CSS

Install Panda CSS as a dev dependency, run its init command to generate a styled-system folder, and then import css, cva, styled, or the JSX components from that folder to write styles. This works for any project that can run a build step, including React Server Components, because Panda generates static CSS at build time rather than at runtime.

The steps below assume you have Node.js and a package manager (npm, pnpm, or yarn) available, and that your project already has a build pipeline.

1. Install the dev dependency

Panda CSS ships as a development dependency. The homepage shows the install command:

npm i -D @pandacss/dev

The -D flag matters: Panda is a build-time tool, so it belongs in devDependencies, not in your runtime dependencies.

2. Initialize the configuration

After installing, run the init command to create a panda.config.ts file and the generated styled-system directory:

npx panda init

Two things happen here:

• panda.config.ts is created. This is where you declare your design tokens, themes, and which files Panda should scan for styles.
• styled-system/ is generated. This folder holds the type-safe style functions and JSX components you import in your code. You don't edit it by hand — it's regenerated from your config.

If you use a framework with its own setup flow, check the official guides, since the exact init flags and config location can differ per framework.

3. Import styles from styled-system

Once the folder exists, you write styles by importing from it. The homepage shows three patterns.

Style functions with css

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>
      <div className={css({ mt: "4", fontSize: "xl", fontWeight: "semibold" })}>
        John Doe
      </div>
    </div>
  );
}

css() returns a class name. stack and circle are built-in patterns — reusable layout recipes you call the same way.

JSX components

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" />
      </Circle>
      <Box mt="4" fontSize="xl" fontWeight="semibold">
        John Doe
      </Box>
    </Stack>
  );
}

These components accept style props directly, so you skip the css() call when a component wrapper reads better.

Variants with 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);

cva defines a recipe with named variants; styled wraps an element with that recipe. This is how you build a component with multiple visual states without writing conditional class strings by hand.

What you get from this setup

Verifying it works

1. Run your normal dev or build command.
2. Confirm a CSS file is emitted and linked in your output.
3. Inspect an element using css() or a JSX component and check that the generated class resolves to real CSS rules.
4. If a style doesn't appear, the usual cause is that the file using it isn't covered by the include/exclude globs in panda.config.ts — Panda only generates styles for files it scans.

Where to go next

• Docs and Guides — linked from the homepage for framework-specific setup.
• Playground — try style functions and see the generated output without setting up a project.
• Showcase — see real projects built with Panda.
• Panda Mastery (pandamastery.com) — the official course created by the Panda team, if you want structured learning beyond the docs.

The homepage also notes that Panda CSS v2.0 has been released, so confirm you're reading docs for the version you installed.