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',
})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
#000orblack.
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...
},
},
},
},
},
},
},
})Learn more about recipes and slot recipes at Panda CSS.