Guides

Using Panda in a Design System

Panda is a great fit for design systems. Using the presets, you to build a library of reusable layout patterns, tokens, and recipes that can be used across multiple projects.

Let's say you have a monorepo with app and design-system that matches the following structure:

Configuring Panda

Follow the installation instructions to install Panda in both projects.

Your project should now look like this:

Setup Design System

In the design system directory, update the panda config as follows:

• Set the emitPackage option to true in your config
• Set the outdir to any package name you want to use

export default defineConfig({
  // ...
  emitPackage: true,
  outdir: 'style-engine'
})

This option will write the panda output to the specified package name in the node_modules/style-engine

Create Preset

You can now define presets in the design system project. For example, let's create a preset that includes some basic colors.

import { definePreset } from '@pandacss/dev'
 
export const preset = definePreset({
  theme: {
    tokens: {
      colors: {
        primary: { value: 'blue' },
        secondary: { value: 'green' }
      }
    }
  }
})

Now, you can add the preset to the panda.config.ts file:

import { defineConfig } from '@pandacss/dev'
 
export default defineConfig({
  // ...
  presets: ['panda.preset.ts']
})

Generate artifacts

Delete the initially generated styled-system directory in both project, and run the following command in both projects:

pnpm panda codegen

Export Preset

Then you can export the preset in the index.ts file:

export { preset } from './panda.preset'

Start using Panda

You can now import the generated artifacts in your project:

import { css } from 'style-engine/css'
 
export default function App() {
  return <div className={css({ fontSize: 'lg' })}>Hello World</div>
}

Mark as External

If you want to build the design system, make sure you mark it as an external in your bundler.

For example, in tsup, you can do this like so:

import { defineConfig } from 'tsup'
 
export default defineConfig({
  external: ['style-engine']
})

Setup App

In the app directory, update the panda config as follows:

• Set the emitPackage option to true in your config
• Set the outdir to the same package name you used in the design system
• Add the preset from the design system package

import { defineConfig } from '@pandacss/dev'
import { preset } from '@acme-org/design-system'
 
export default defineConfig({
  // ...
  presets: [preset]
  emitPackage: true,
  outdir: 'style-engine'
})

Generate artifacts

Delete the initially generated styled-system directory in both project, and run the following command in both projects:

pnpm panda codegen

Start using Panda

You can now import the generated artifacts in your project:

import { css } from 'style-engine/css'
 
export default function App() {
  return <div className={css({ fontSize: 'lg' })}>Hello World</div>
}