Customize

Learn how to customize the Park UI Preset

This guide will walk you through the different ways you can customize Park UI to fit your brand.

Presets

Park UI was built with customization in mind. By adding the @park-ui/panda-preset into your Panda configuration, you can play with different accent and gray colors and pick a border radii to match your brand.

import { defineConfig } from '@pandacss/dev'
import { createPreset } from '@park-ui/panda-preset'
import amber from '@park-ui/panda-preset/colors/amber'
import sand from '@park-ui/panda-preset/colors/sand'

export default defineConfig({
  preflight: true,
  presets: [createPreset({ accentColor: amber, grayColor: sand, radius: 'sm' })],
  include: ['./src/**/*.{js,jsx,ts,tsx,vue}'],
  jsxFramework: 'react', // or 'solid' or 'vue'
  outdir: 'styled-system',
})

Custom Color Palette

You can define a custom accent color palette and integrate it into your project. Here's an example of how you can create a custom coral color palette:

export const coral = {
  name: 'coral',
  tokens: defineTokens.colors({
    light: {
      '1': { value: '#fff8f7' },
      // [2 - 11]
      '12': { value: '#762d25' },
    },
    dark: {
      '1': { value: '#1c1412' },
      // [2 - 11]
      '12': { value: '#faa19b' },
    },
  }),

  semanticTokens: defineSemanticTokens.colors({
    '1': { value: { _light: '{colors.coral.light.1}', _dark: '{colors.coral.dark.1}' } },
    // [2 - 11]
    '12': { value: { _light: '{colors.coral.light.12}', _dark: '{colors.coral.dark.12}' } },

    default: {
      value: {
        _light: '{colors.coral.light.9}',
        _dark: '{colors.coral.dark.9}',
      },
    },
    emphasized: {
      value: {
        _light: '{colors.coral.light.10}',
        _dark: '{colors.coral.dark.10}',
      },
    },
    fg: {
      value: {
        _light: 'white',
        _dark: 'white',
      },
    },
    text: {
      value: {
        _light: '{colors.coral.light.11}',
        _dark: '{colors.coral.dark.11}',
      },
    },
  }),
}

Since Park UI uses Radix Colors under the hood, you can use their tool to generate your custom color palette.

And then you can use it in your panda.config.ts like this:

import { defineConfig } from '@pandacss/dev'
import { createPreset } from '@park-ui/panda-preset'
import { createPreset } from '@park-ui/panda-preset/colors/sand'
import coral from './coral'

export default defineConfig({
  presets: [createPreset({ grayColor: sand, accentColor: coral, radius: 'sm' })],
  // etc.
})

Semantic Tokens

A powerful way to customize Park UI is by adjusting semantic tokens. This is helpful if you want to modify specific aspects of the theme, such as the appearance of disabled elements.

import { defineConfig } from '@pandacss/dev'

export default defineConfig({
  // ...
  theme: {
    extend: {
      semanticTokens: {
        colors: {
          fg: {
            disabled: { value: '{colors.gray.6}' },
          },
          bg: {
            disabled: { value: { base: '{colors.gray.4}', _dark: '{colors.gray.5}' } },
          },
        },
      },
    },
  },
})

You don't have to use color tokens. You can also use simple color values like #000 or black.

Recipes