Panda CLI

Install Panda

pnpm install -D @pandacss/dev
pnpm panda init

npm install -D @pandacss/dev
npx panda init

yarn add -D @pandacss/dev
yarn panda init

bun add -D @pandacss/dev
bun 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.

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

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

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

# Run it once
bun panda
 
# Run it in watch mode
bun 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' })} />
}