Customization

Theme

Panda comes with a default theme that is used to generate the utilities for your project. You can customize this theme

Breakpoints

Use the breakpoints key in the theme section of your Panda config file to customize the default breakpoints.

import { defineConfig } from '@pandacss/dev'
 
export default defineConfig({
  theme: {
    extend: {
      breakpoints: {
        '3xl': '1800px'
      }
    }
  }
})

Panda ships with the following breakpoints by default:

Tokens

Colors

Use the colors key in the token section of your Panda config file to customize the default color values.

import { defineConfig } from '@pandacss/dev'
 
export default defineConfig({
  theme: {
    extend: {
      tokens: {
        colors: {
          brand: { value: '#EA8433' }
        }
      }
    }
  }
})

Panda comes with a handful of colors picked from the amazing Tailwind color palette

Spacing

Use the spacing key in the theme section of your Panda config file to customize the default spacing values.

import { defineConfig } from '@pandacss/dev'
 
export default defineConfig({
  theme: {
    extend: {
      tokens: {
        spacing: {
          gutter: { value: '32px' }
        }
      }
    }
  }
})

Panda ships with the following spacing tokens by default:

Border Radius

Use the radii key in the theme section of your Panda config file to customize the default border radius values.

Shadows

Use the shadows key in the theme section of your Panda config file to customize the default box shadows values.

Panda ships with the following shadows by default:

Sizing

Use the sizes key in the theme section of your Panda config file to customize the default sizing values.

import { defineConfig } from '@pandacss/dev'
 
export default defineConfig({
  theme: {
    extend: {
      tokens: {
        sizes: {
          icon: { value: '24px' }
        }
      }
    }
  }
})

Panda ships with the following sizing tokens by default, in addition with the values from the default Panda spacing tokens:

Fonts

Use the fonts key in the theme object to customize the default font families.

import { defineConfig } from '@pandacss/dev'
 
export default defineConfig({
  theme: {
    extend: {
      tokens: {
        fonts: {
          marketing: { value: 'Inter Variable' }
        }
      }
    }
  }
})

Panda ships with the following font families tokens by default:

Font Sizes

Use the fontSizes key in the theme object to customize the default font sizes.

import { defineConfig } from '@pandacss/dev'
 
export default defineConfig({
  theme: {
    extend: {
      tokens: {
        fontSizes: {
          big: { value: '80px' }
        }
      }
    }
  }
})

Panda ships with the following font size tokens by default:

Keyframes

Use the keyframes key in the theme section of your Panda config file to customize the default keyframes.

import { defineConfig } from '@pandacss/dev'
 
export default defineConfig({
  theme: {
    extend: {
      keyframes: {
        fadein: {
          '0%': { opacity: '0' },
          '100%': { opacity: '1' }
        },
        fadeout: {
          '0%': { opacity: '1' },
          '100%': { opacity: '0' }
        }
      }
    }
  }
})

Panda ships with the following keyframes by default:

Minimal setup

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