Frontend & Design

Panda CSS Zero-Runtime

Write type-safe, zero-runtime CSS with Panda CSS, combining the DX of CSS-in-JS with the performance of static extraction.

Claude Code Cursor Copilot Windsurf

Overview

Panda CSS is a zero-runtime CSS-in-JS engine that generates atomic CSS at build time. It gives you the developer experience of CSS-in-JS (type-safe tokens, conditions, recipes) without shipping any runtime JavaScript for styling. AI agents can configure design tokens, create recipes, and write style props that compile to optimized static CSS.

Built by the Chakra UI team, Panda CSS works with any JavaScript framework. Your AI agent can define tokens for colors, spacing, and typography in `panda.config.ts`, create reusable recipes for component variants, and write styles using the `css()` function or JSX style props with full TypeScript autocomplete.

The atomic CSS approach means your production bundle only contains the styles actually used in your application, resulting in minimal CSS output. AI agents can help you migrate from runtime CSS-in-JS libraries like Emotion or Styled Components to Panda for better performance without sacrificing DX.

Who Is This For?

Teams seeking CSS-in-JS DX without runtime performance costs
Developers building design systems with type-safe tokens and recipes
Engineers migrating from runtime CSS-in-JS to zero-runtime solutions
Full-stack developers who want framework-agnostic styling

Installation

Setup for Claude Code

npm install -D @pandacss/dev
npx panda init

Configuration

// panda.config.ts
import { defineConfig } from "@pandacss/dev";
export default defineConfig({
  preflight: true,
  include: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    tokens: {
      colors: { primary: { value: "#6366f1" } },
    },
  },
  outdir: "styled-system",
});