Customize

Learn how to customize the Park UI Theme

Depending on your project's needs, you may want to customize the Park UI theme. This guide will walk you through the different ways you can tailor Park UI to fit your brand.

Presets

Park UI was built with customization in mind. When you integrate the @park-ui/panda-preset into your Panda config, it lets you adjust features like color palettes and border radii to fit 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' },
      // ...
      '12': { value: '#762d25' },
    },
    dark: {
      '1': { value: '#1c1412' },
      // ...
      '12': { value: '#faa19b' },
    },
  }),

  semanticTokens: defineSemanticTokens.colors({
    '1': { value: { _light: '{colors.coral.light.1}', _dark: '{colors.coral.dark.1}' } },
    // ...
    '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

Another cool 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

To customize or enhance a component's style, you want to extend its recipe. In the example below we're extending the button recipe to render all buttons in uppercase.

import { defineConfig } from '@pandacss/dev'

export default defineConfig({
  // ...
  theme: {
    extend: {
      recipes: {
        button: {
          base: {
            textTransform: 'uppercase',
          },
        },
      },
    },
  },
})

You can also add a completly new variant to a component. The following example demonstrates how to add a primary variant to the button component.

import { defineConfig } from '@pandacss/dev'

export default defineConfig({
  // ...
  theme: {
    extend: {
      recipes: {
        button: {
          variants: {
            primary: {
              base: {
                color: '{colors.white}',
                // etc...
              },
            },
          },
        },
      },
    },
  },
})