Creating Presets

In this lesson, we'll look at how presets can help manage design consistency across multiple projects.

Usually, different apps or websites under the same brand will share common design elements like colors, spacing, fonts, etc. Instead of copying those things over manually each time, we can save them as reusable presets.

Create a Preset from Panda Config

First, create a new file named panda-preset.ts to hold the preset.

Next, use the definePreset function to create your preset.

import { definePreset } from '@pandacss/preset'

export const pandaPreset = definePreset({
  theme: {
    tokens: {
      // Add your tokens here
    },
    textStyles: {
      // Add your textStyles here
    },
    layerStyles: {
      // Add your layerStyles here
    },
  },
})

Integrate the Preset into Panda Config

Import the preset into your panda.config file and add the presets key to the config, specifying your custom preset in an array.

import { pandaPreset } from './panda-preset'

export default defineConfig({
  presets: [pandaPreset],
})

To combine with the built-in Panda preset, include "@pandacss/preset-panda" in the array.

import { pandaPreset } from './panda-preset'

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