Getting Started

Panda CLI

The quickest way to use Panda from scratch is by using the Panda CLI tool.

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

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'
})

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

Start using Panda

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

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

Troubleshooting

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"]
}