Presets

Any configuration you add in your own panda.config.js file is smartly merged with the presets you list, 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 the styled-system vs the CSS.

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 basePreset from '@pandacss/preset-base'
import pandaPreset from '@pandacss/preset-panda'
import { acmePreset } from '@acme/preset'
 
export default defineConfig({
  presets: [basePreset, pandaPreset, acmePreset],
  include: ['./src/**/*.{js,jsx,ts,tsx}']
})

export default defineConfig({
  presets: [basePreset, 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?

Panda includes exactly the presets you list in presets — nothing is added for you.

• @pandacss/preset-base (default utilities, conditions, and patterns): included only if you list it.
• @pandacss/preset-panda (default tokens, breakpoints, and text styles): included only if you list it.

List both when you want the full defaults, then add your own presets:

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

For a system with no defaults at all, use presets: [].

Minimal setup

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