Panda CLI

An alternative way to use Panda is by running the Panda CLI tool.

Install Panda

pnpm install -D @pandacss/dev
pnpm panda init

Configure the content

Add the paths to all of your JavaScript or TypeScript code where you intend to use panda.

import { defineConfig } from '@pandacss/dev'
export default defineConfig({
  preflight: true,
  include: ['./src/**/*.{ts,tsx,js,jsx}', './pages/**/*.{ts,tsx,js,jsx}'],
  exclude: [],
  outdir: 'styled-system'

Update package.json scripts

Open your package.json file and update the scripts section as follows:

  "scripts": {
+    "prepare": "panda codegen",

The prepare script that will run codegen after dependency installation. Read more about codegen in the CLI section.


This step ensures that the panda output directory is regenerated after each dependency installation. So you can add the output directory to your .gitignore file and not worry about it.

Import the generated CSS

For each Panda run, it emits the generated CSS at the styled-system/styles.css file path. Import this file at the root component of your project.

import './styled-system/styles.css'
export function App() {
  return <div>Page</div>

Start the Panda build process

Run the CLI tool to scan your JavaScript and TypeScript files for style properties and call expressions.

# Run it once
pnpm panda
# Run it in watch mode
pnpm panda --watch

Start using Panda

Use the generated style utilities in your code and panda will extract them to the generated CSS file. Then run your build process.

import { css } from './styled-system/css'
export function App() {
  return <div className={css({ bg: 'red.400' })} />


If you're not getting import autocomplete in your IDE, you may need to include the styled-system directory in your tsconfig.json file:

  // ...
  "include":  ["src", "styled-system"]