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.

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.

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.

You can use a glob to override the config.include option like this:

panda cssgen "src/**/*.css" --outfile dist.css

or you can use it with a {type} argument to generate only a specific type of CSS:

• preflight
• tokens
• static
• global
• keyframes

You can use it like this:

panda cssgen "static" --outfile dist/static.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	-
--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.

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	-

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/**"

Flag	Description	Related
--outfile <filepath>	Output analyze report in given JSON filepath	-
--silent	Whether to suppress all output	config.logLevel
--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.

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

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