CLI Reference

Use the panda CLI to scaffold a project, generate your styled-system and CSS, and inspect what your project uses.

The commands are:

Shared flags

Most commands accept these flags.

Commands that scan your source files (dev, build, check, cssgen, analyze, debug, lib, buildinfo) also take --include:

Commands that watch (dev, build, codegen, cssgen, lib) also take:

panda init is the exception: it doesn't take --watch, --max-warnings, or the tracing flags.

init

Scaffold Panda in a project. It creates panda.config.ts with the default presets, installs those presets, updates .gitignore, and runs the first codegen into your outdir.

pnpm panda init
 
# Run the setup wizard
pnpm panda init --interactive
 
# Also emit a PostCSS config file
pnpm panda init --postcss

panda init also accepts the shared flags, except --watch, --max-warnings, and the tracing flags.

dev

Watch your source files and rebuild the system and CSS on every change. This is panda build --watch under one name.

pnpm panda dev
 
# Restrict the scan to specific files
pnpm panda dev --include "./src/**/*.tsx"

panda dev also accepts the shared flags, --include, and --watch-debounce.

build

Generate the system and CSS once. This is the default — bare panda runs panda build.

By default it scans and generates CSS for the whole project, following the include and exclude options in your config.

pnpm panda
 
# Same thing, spelled out
pnpm panda build
 
# Scan a subset of files
pnpm panda build --include "./src/components/**"
 
# Split output into separate files per layer and recipe
pnpm panda build --splitting

panda build also accepts the shared flags, --include, and --watch-debounce.

check

Check that generated files are up to date without writing anything. It exits non-zero if the output is missing or stale, so use it in CI to catch a styled-system that drifted from your config or source.

pnpm panda check

panda check also accepts the shared flags and --include.

codegen

Generate the styled-system output only, based on your config. This skips the source scan and CSS extraction — use it when you only need the generated functions and types.

pnpm panda codegen
 
# Clean the output directory first
pnpm panda codegen --clean
 
# Rebuild when the config changes
pnpm panda codegen --watch

panda codegen also accepts the shared flags and --watch-debounce.

cssgen

Generate CSS from your source files only. This skips codegen — use it when your styled-system already exists.

pnpm panda cssgen
 
# Only usage CSS (recipes and utilities), no reset/base/tokens
pnpm panda cssgen --minimal
 
# Split output into separate files per layer and recipe
pnpm panda cssgen --splitting

panda cssgen also accepts the shared flags, --include, and --watch-debounce.

CSS output for monorepos

--minimal emits a package's usage CSS (recipes and utilities) without duplicating reset, base, and tokens. Emit the full stylesheet once from the app or root:

1. App or root: panda build or panda cssgen for the full stylesheet.
2. Per package: panda cssgen --minimal for local usage CSS.
3. Published libraries: panda lib, then consumers wire it in with designSystem.

Splitting CSS into files

--splitting writes separate CSS files instead of one stylesheet, so you can load only the CSS a page needs or trace which layer or recipe produced a rule.

With --splitting, Panda emits this structure:

styled-system/
├── styles.css              # @layer declarations + @imports for all layers
└── styles/
    ├── reset.css           # Preflight/reset CSS
    ├── global.css          # Global CSS styles
    ├── tokens.css          # Design token CSS variables
    ├── utilities.css       # Atomic utility classes
    ├── recipes.css         # @imports for all recipe files
    ├── recipes/
    │   ├── button.css      # Individual recipe: button
    │   ├── card.css        # Individual recipe: card
    │   └── ...             # Other recipes as separate files
    └── themes/
        ├── dark.css        # Theme-specific tokens (not auto-imported)
        └── light.css       # Theme-specific tokens (not auto-imported)

The main styles.css declares the layers and imports each layer file (but not the themes):

/* styled-system/styles.css */
@layer reset, base, tokens, recipes, utilities;
 
@import './styles/reset.css';
@import './styles/global.css';
@import './styles/tokens.css';
@import './styles/recipes.css';
@import './styles/utilities.css';

You then choose how to import them:

/* Option 1: Import everything (default) */
@import './styled-system/styles.css';
 
/* Option 2: Import specific layers only */
@import './styled-system/styles/tokens.css';
@import './styled-system/styles/utilities.css';
 
/* Option 3: Import specific recipes */
@import './styled-system/styles/recipes/button.css';
@import './styled-system/styles/recipes/card.css';
 
/* Option 4: Import a specific theme (when using multiple themes) */
@import './styled-system/styles/themes/oceanic.css';

analyze

Report which tokens, recipes, utilities, patterns, and keyframes your project uses, and which configured ones no scanned file touches. It scans the whole project, following your include and exclude options, and prints a summary followed by one section per category. For what to do with the report, see Find what nobody uses.

pnpm panda analyze
 
# One section
pnpm panda analyze --scope utilities
 
# Only the configured names nobody uses, one per line
pnpm panda analyze --unused
 
# Write a JSON report
pnpm panda analyze --outfile analyze.json

panda analyze also accepts the shared flags and --include.

doctor

Validate your setup and print a project summary — config path, source count, generated artifacts, conditions, token categories, and utilities. It reports any config or diagnostic errors and exits non-zero when it finds them. This replaces the v1 inspect, validate, and info commands.

pnpm panda doctor
 
# Machine-readable output for scripts
pnpm panda doctor --json

panda doctor accepts the shared flags.

debug

Dump the resolved config and per-file extraction results, useful for bug reports. More detail in the Debugging docs.

pnpm panda debug
 
# Print to stdout without writing files
pnpm panda debug --dry
 
# Only dump the resolved config
pnpm panda debug --only-config
 
# Bundle the dump into one archive to attach to an issue
pnpm panda debug --zip

panda debug also accepts the shared flags and --include. --profile writes files to disk, so it can't be combined with --dry. --zip can't be combined with --dry or --profile.

lib

Publish a design system so other apps share your tokens, recipes, and CSS without re-scanning your source. It writes machine artifacts under panda/ and syncs your package exports. This replaces the v1 ship command.

See Build a design system and Consume with Panda.

pnpm panda lib
 
# Built-only package: set the re-extract fallback globs yourself
pnpm panda lib --files './**/*.{js,mjs}'
 
# Stamp an explicit peer Panda range
pnpm panda lib --panda '^2.0.0'

panda lib also accepts the shared flags, --include, and --watch / --watch-debounce.

buildinfo

Write a portable panda.buildinfo.json only. Prefer panda lib for shipping a library — this command is the lower-level piece for cases where you just need the build-info artifact.

pnpm panda buildinfo
 
# Custom output path
pnpm panda buildinfo --outfile ./dist/panda.buildinfo.json

panda buildinfo also accepts the shared flags and --include.

Profiling a slow build

Add --profile to any command to capture where time goes, including time inside the Rust engine:

panda build --profile

It writes two files:

• .panda/trace.json — open it in chrome://tracing or ui.perfetto.dev (opens in a new tab)
• .panda/timings.json — per-span totals and the slowest files

MCP server

The MCP (Model Context Protocol) server is no longer a panda subcommand. It ships as its own package, so you run it directly:

npx -y @pandacss/mcp

See the MCP Server guide for setup and available tools.