Presets

By default, any configuration you add in your own panda.config.js file is smartly merged with the default presets, allowing you to override or extend specific parts of the configuration.

When to use a preset

Use a preset when you want to share tokens, theme, utilities, patterns, or recipes across projects:

• Design system package — one npm package for your tokens and theme
• Multiple apps — the same colors, spacing, and breakpoints everywhere
• Component libraries — consumers add your preset in panda.config.ts (component library guide)

If the app does not use Panda, ship static CSS instead. See the component library guide for other options.

You can specify a preset in your panda.config.js file by using the presets option:

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

Creating a preset

Presets are also valid Panda configuration objects, taking a similar shape to the configuration you would add in your panda.config.ts file.

// my-preset.js
import { definePreset } from '@pandacss/dev'
 
export default definePreset({
  name: 'my-preset',
  theme: {
    tokens: {
      colors: {
        rose: {
          50: { value: '#fff1f2' },
          // ...
          800: { value: '#9f2233' }
        }
      }
    }
  }
})

You can then use this preset in your panda.config.ts file:

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

End-to-end example

This walks through publishing a preset and using it in an app. For library build details, see Ship a Panda preset.

import { definePreset } from '@pandacss/dev'
 
export const acmePreset = definePreset({
  name: '@acme/preset',
  theme: {
    extend: {
      tokens: {
        colors: {
          brand: { value: '#2563eb' }
        }
      }
    }
  }
})

{
  "name": "@acme/preset",
  "exports": {
    ".": {
      "import": "./dist/index.js",
      "require": "./dist/index.cjs"
    }
  }
}

pnpm tsup src/index.ts --format esm,cjs --dts
pnpm publish

pnpm add -D @acme/preset

import { defineConfig } from '@pandacss/dev'
import pandaPreset from '@pandacss/preset-panda'
import { acmePreset } from '@acme/preset'
 
export default defineConfig({
  presets: [pandaPreset, acmePreset],
  include: ['./src/**/*.{js,jsx,ts,tsx}']
})

export default defineConfig({
  presets: [pandaPreset, acmePreset],
  theme: {
    extend: {
      tokens: {
        colors: {
          brand: { value: '#1d4ed8' }
        }
      }
    }
  }
})

The available keys for a preset are:

• conditions
• globalCss
• globalFontface
• patterns
• staticCss
• theme
• utilities

Asynchronous presets

There are cases where you need to perform logic to determine the content of your preset, you'd call functions to do this. In cases where they're asynchronous; panda allows promises, given that they resolve to a valid preset object.

// my-preset.js
export default async function myPreset() {
  const roseColors = await getRoseColors()
 
  return definePreset({
    name: 'my-preset',
    theme: {
      tokens: {
        colors: {
          rose: roseColors
        }
      }
    }
  })
}

You can then use this preset in your panda.config.ts file:

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

Which panda presets will be included ?

• @pandacss/preset-base: ALWAYS included if NOT using eject: true

• @pandacss/preset-panda: only included by default if you haven't specified the presets config option, otherwise you'll have to include that preset by yourself like so:

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

Minimal setup

If you want to use Panda with the bare minimum, without any of the defaults, you can read more about it here