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:

Command	What it does
panda init	Scaffold panda.config.ts and run the first codegen
panda dev	Watch files and rebuild the system and CSS on change
panda build	Generate the system and CSS once (bare panda runs this)
panda check	Check generated files without writing (use in CI)
panda codegen	Generate the styled-system output only
panda cssgen	Generate CSS only
panda analyze	Report token, recipe, and utility usage across your sources
panda doctor	Validate your setup and print a project summary
panda debug	Dump resolved config and per-file extraction for bug reports
panda lib	Publish a design system other apps can consume
panda buildinfo	Write a portable panda.buildinfo.json only

Shared flags

Most commands accept these flags.

Flag	Description
--cwd <dir>	Current working directory
--config, -c <path>	Path to the Panda config file
--json	Print the result as JSON (for scripts)
--format <format>	Diagnostic output format: human, pretty, json, or github
--log-level <level>	Output level: silent, error, warn, info, or debug
--max-warnings <n>	Fail when warning diagnostics exceed this count
--logfile <file>	Write human output to a log file
--no-color	Disable ANSI colors (or set the NO_COLOR environment variable)
--profile	Capture compiler timings — see Profiling a slow build
--trace	Enable compiler tracing
--trace-output <fmt>	Trace output: fmt or chrome-json
--trace-file <file>	Trace output file for chrome-json tracing

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

Flag	Description
--include <glob>	Source globs to scan, replacing the config include list (repeat or comma-separate)

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

Flag	Description
--watch, -w	Watch files and rebuild on change
--watch-debounce <ms>	Debounce watch rebuilds, in milliseconds

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

Flag	Description	Related
--interactive, -i	Run the setup wizard	-
--force, -f	Overwrite an existing config file	-
--postcss, -p	Emit a PostCSS (opens in a new tab) config file	-
--outdir <dir>	Output directory for generated files	config.outdir
--out-extension <ext>	Generated runtime file extension: ts, js, or mjs	config.outExtension
--jsx-framework <framework>	JSX framework: react, preact, vue, solid, or qwik	config.jsxFramework
--jsx-style-props <mode>	JSX style props: all, minimal, or none	-
--syntax <syntax>	CSS syntax: object-literal or template-literal	config.syntax
--strict-tokens	Set strictTokens to true	config.strictTokens
--skip-presets	Skip adding and installing the default presets	-
--no-gitignore	Don't update .gitignore with the output directory	-
--no-codegen	Don't run codegen after setup	-

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"

Flag	Description	Related
--outdir <dir>	Output directory for generated files	config.outdir
--outfile, -o <file>	Output file for extracted CSS	-
--splitting	Emit split CSS files (one per layer and recipe)	-
--clean	Clean the output directory before generating	config.clean
--polyfill	Polyfill cascade layers with :not(#\\#) for older browsers	config.polyfill

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

Flag	Description	Related
--watch, -w	Watch files and rebuild on change	-
--outdir <dir>	Output directory for generated files	config.outdir
--outfile, -o <file>	Output file for extracted CSS	-
--splitting	Emit split CSS files (one per layer and recipe)	-
--clean	Clean the output directory before generating	config.clean
--polyfill	Polyfill cascade layers with :not(#\\#) for older browsers	config.polyfill
--check	Check generated files without writing	-

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

Flag	Description	Related
--outdir <dir>	Output directory to check	config.outdir
--outfile, -o <file>	CSS file to check	-
--splitting	Check split CSS output instead of a single file	-
--polyfill	Account for the cascade-layer polyfill when checking	config.polyfill

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

Flag	Description	Related
--watch, -w	Watch the config and rebuild on change	-
--outdir <dir>	Output directory for generated files	config.outdir
--clean	Clean the output directory before generating	config.clean
--check	Check generated files without writing	-

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

Flag	Description	Related
--watch, -w	Watch files and rebuild on change	-
--outfile, -o <file>	Output file for extracted CSS (default ./styled-system/styles.css)	-
--minimal	Emit usage CSS only (recipes and utilities)	-
--minify, -m	Minify the emitted CSS (overrides config.minify)	config.minify
--splitting	Emit split CSS files (one per layer and recipe)	-
--polyfill	Polyfill cascade layers with :not(#\\#) for older browsers	config.polyfill
--check	Check that the CSS is up to date without writing	-

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. By default it scans the whole project, following your include and exclude options.

pnpm panda analyze
 
# Scope the report
pnpm panda analyze --scope tokens
pnpm panda analyze --scope recipes
 
# Write a JSON report
pnpm panda analyze --outfile analyze.json
 
# Write a static HTML report
pnpm panda analyze --report ./analyze-report
 
# Open an interactive UI
pnpm panda analyze --ui

Flag	Description	Related
--scope <scope>	Scope the report: all, tokens, recipes, utilities, patterns, or keyframes (token/recipe are aliases)	-
--limit <n>	Maximum rows per section in the terminal report	-
--outfile <path>	Write the report as JSON to this path	-
--report <dir>	Write a static HTML report to this directory	-
--ui	Start an interactive report UI that refreshes on change	-
--ui-host <host>	Host for the report UI server	-
--ui-port <port>	Port for the report UI server	-

panda analyze also accepts the shared flags, --include, and --watch-debounce (UI refresh debounce).

---

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

Flag	Description	Related
--outdir <dir>	Debug output directory (default <styled-system>/debug)	-
--dry	Print the dump to stdout instead of writing files	-
--only-config	Only dump the resolved config, skip per-file extraction	-

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

---

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 Building a design system and Consuming a design system for the full workflow.

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'

Flag	Description	Related
--outdir, -o <dir>	Output directory for the artifacts (default dist)	-
--panda <range>	Peer Panda version range to stamp (defaults to your @pandacss/dev peer, or the running major)	-
--files <globs>	Re-extract fallback globs for consumers, relative to the output dir (repeat or comma-separate)	-
--minify, -m	Minify the generated build-info JSON	-

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

Flag	Description	Related
--outfile, -o <path>	Output path (default ./<outdir>/panda.buildinfo.json)	-
--panda <range>	Peer Panda version range to stamp (defaults to the running Panda's major)	-
--minify, -m	Minify the generated 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.