CLI Reference

Use Panda's Command-Line Interface (CLI) to develop, build, and preview your project from a terminal.

init

Initialize Panda in a project. This process will:

• Create a panda.config.ts file in your project with the default settings and presets.
• Emit CSS utilities for your project in the specified output directory.

pnpm panda init
 
# Initialize with interactive mode
pnpm panda init --interactive
 
# Initialize with PostCSS config
pnpm panda init --postcss

Flag	Description	Related
--interactive, -i	Whether to run the interactive mode	-
--force, -f	Whether to overwrite existing files	-
--postcss, -p	Whether to emit a postcss (opens in a new tab) config file	-
--config, -c <path>	Path to Panda config file	config
--cwd <dir>	Path to current working directory	-
--silent	Whether to suppress all output	-
--no-gitignore	Whether to update gitignore with the output directory	-
--no-codegen	Whether to run the codegen process	-
--out-extension <ext>	The extension of the generated js files (default: 'mjs')	config.outExtension
--outdir <dir>	The output directory for the generated files	config.outdir
--jsx-framework <framework>	The jsx framework to use	config.jsxFramework
--syntax <syntax>	The css syntax preference	config.syntax
--strict-tokens	Set strictTokens to true	config.strictTokens
--logfile <file>	Outputs logs to a file	Debugging

---

panda

Run the extract process to generate static CSS from your project.

By default it will scan and generate CSS for the entire project depending on your include and exclude options from your config file.

pnpm panda
# You can also scan a specific file or folder
# using the optional glob argument
pnpm panda src/components/Button.tsx
pnpm panda "./src/components/**"

Flag	Description	Related
--outdir, -o [dir]	The output directory for the generated CSS utilities	config.outdir
--minify, -m	Whether to minify the generated CSS	config.minify
--watch, -w	Whether to watch for changes in the project	config.watch
--poll	Whether to poll for file changes	config.poll
--config, -c <path>	The path to the config file	config
--cwd <path>	The current working directory	config.cwd
--preflight	Whether to emit the preflight or reset CSS	config.preflight
--silent	Whether to suppress all output	config.logLevel
--exclude, -e <files>	Files to exclude from the extract process	config
--clean	Whether to clean the output directory before emitting	config.clean
--hash	Whether to hash the output classnames	config.hash
--lightningcss	Use lightningcss instead of postcss for css optimization	config.lightningcss
--polyfill	Polyfill CSS @layers at-rules for older browsers	config.polyfill
--emitTokensOnly	Whether to only emit the tokens directory	config.emitTokensOnly
--cpu-prof	Generate a panda-{command}-{timestamp}.cpuprofile file for profiling	Debugging
--logfile <file>	Outputs logs to a file	Debugging

---

codegen

Generate new CSS utilities for your project based on the configuration file.

pnpm panda codegen
 
# Clean output directory before generating
pnpm panda codegen --clean
 
# Watch for config changes
pnpm panda codegen --watch

Flag	Description	Related
--silent	Whether to suppress all output	config.logLevel
--clean	Whether to clean the output directory before emitting	config.clean
--config, -c <path>	Path to Panda config file	config
--watch, -w	Whether to watch for changes in the project	config.watch
--poll, -p	Whether to poll for file changes	config.poll
--cwd <path>	Current working directory	config.cwd
--cpu-prof	Generate a panda-{command}-{timestamp}.cpuprofile file for profiling	Debugging
--logfile <file>	Outputs logs to a file	Debugging

cssgen

Generate the CSS from files.

panda cssgen
 
# Generate CSS for specific type
panda cssgen tokens
 
# Generate CSS for specific glob
panda cssgen "src/**/*.css"
 
# Generate CSS files split into separate files per layer and recipe
panda cssgen --splitting

When using the cssgen command, you can pass a {type} argument to generate only a specific type of CSS. The supported types are: preflight, tokens, static, global, keyframes.

CSS Splitting

The --splitting flag enables CSS code splitting, which generates separate CSS files for different parts of your design system instead of a single monolithic CSS file. This is useful for:

• Selective loading - Load only the CSS you need for specific pages
• Easier debugging - Identify which layer or recipe contributes to the final CSS

When using --splitting, Panda will generate the following 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 file contains the @layer declarations and imports all the layer files (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 can then choose how to import these files:

/* 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';

Flag	Description	Related
--outfile, -o <file>	Output file for extracted css, default to './styled-system/styles.css'	-
--silent	Whether to suppress all output	config.logLevel
--minify, -m	Whether to minify the generated CSS	config.minify
--clean	Whether to clean the output directory before emitting	config.clean
--config, -c <path>	Path to Panda config file	config
--watch, -w	Whether to watch for changes in the project	config.watch
--minimal	Skip generating CSS for theme tokens, preflight, keyframes, static and global css	-
--splitting	Emit CSS as separate files per layer (reset, global, tokens, utilities) and per recipe	-
--poll, -p	Whether to poll for file changes	config.poll
--cwd <path>	Current working directory	config.cwd
--lightningcss	Use lightningcss instead of postcss for css optimization	config.lightningcss
--polyfill	Polyfill CSS @layers at-rules for older browsers	config.polyfill
--cpu-prof	Generate a panda-{command}-{timestamp}.cpuprofile file for profiling	Debugging
--logfile <file>	Outputs logs to a file	Debugging

studio

Realtime documentation for your design tokens.

pnpm panda studio
 
# Build static studio site
pnpm panda studio --build
 
# Preview built studio
pnpm panda studio --preview
 
# Use custom port
pnpm panda studio --port 3000

Flag	Description	Related
--build	Build	-
--preview	Preview	-
--port <port>	Use custom port	-
--host	Expose to custom host	-
--config, -c <path>	Path to Panda config file	config
--cwd <path>	Current working directory	config.cwd
--outdir <dir>	Output directory for static files	-
--base <path>	Base path of project	-

spec

Generate spec files for your theme (useful for documentation).

pnpm panda spec
 
# Generate specs in custom directory
pnpm panda spec --outdir ./theme-specs

Flag	Description	Related
--silent	Whether to suppress all output	config.logLevel
--outdir <dir>	Output directory for spec files	-
--config, -c <path>	Path to Panda config file	config
--cwd <path>	Current working directory	config.cwd

analyze

Analyze design token and recipe usage.

By default, it will analyze your project based on the include and exclude config options.

pnpm panda analyze
 
# analyze a specific file
pnpm panda analyze src/components/Button.tsx
 
# analyze a specific glob
pnpm panda analyze "src/components/**"
 
# analyze only token usage
pnpm panda analyze --scope token
 
# analyze only recipe usage
pnpm panda analyze --scope recipe

Flag	Description	Related
--outfile <filepath>	Output analyze report in given JSON filepath	-
--silent	Whether to suppress all output	config.logLevel
--scope <type>	Select analysis scope (token or recipe)	-
--config, -c <path>	Path to Panda config file	config
--cwd <path>	Current working directory	config.cwd

debug

Debug design token extraction & CSS generated from files in glob.

More details in Debugging docs.

pnpm panda debug
 
# Debug a specific file
pnpm panda debug src/components/Button.tsx
 
# Output to stdout without writing files
pnpm panda debug --dry
 
# Only output resolved config
pnpm panda debug --only-config

Flag	Description	Related
--silent	Whether to suppress all output	-
--dry	Output debug files in stdout without writing to disk	-
--outdir <dir>	Output directory for debug files, defaults to ../styled-system/debug	-
--only-config	Should only output the config file, default to 'false'	-
--config, -c <path>	Path to Panda config file	config
--cwd <path>	Current working directory	config.cwd
--cpu-prof	Generate a panda-{command}-{timestamp}.cpuprofile file for profiling	Debugging
--logfile <file>	Outputs logs to a file	Debugging

ship

Ship extract result from files in glob.

By default it will extract from the entire project depending on your include and exclude options from your config file.

pnpm panda ship
# You can also analyze a specific file or folder
# using the optional glob argument
pnpm panda ship src/components/Button.tsx
pnpm panda ship "./src/components/**"

Flag	Description	Related
--outfile <filepath>	Output path for the JSON build info file, default to './styled-system/panda.buildinfo.json'	-
--silent	Whether to suppress all output	config.logLevel
--minify, -m	Whether to minify the generated JSON	-
--config, -c <path>	Path to Panda config file	config
--cwd <path>	Current working directory	config.cwd
--watch, -w	Whether to watch for changes in the project	config.watch
--poll, -p	Whether to poll for file changes	config.poll

emit-pkg

Emit package.json with entrypoints, can be used to create a workspace package dedicated to the config.outdir, in combination with config.importMap

pnpm panda emit-pkg
 
# Specify output directory
pnpm panda emit-pkg --outdir styled-system

Flag	Description	Related
--outdir <dir>	The output directory for the generated CSS utilities	config.outdir
--base <path>	The base directory of the package.json entrypoints	-
--silent	Whether to suppress all output	config.logLevel
--cwd <path>	Current working directory	config.cwd