Default Theme

Panda comes with a default theme that is used to generate the utilities for your project. It's provided by the Panda preset, and you can customize any part of it to match your design requirements. Put your changes under extend so the defaults stay. See Extending a preset.

Breakpoints

Panda ships with the following breakpoints by default:

Tokens

A token is a named value. For example, brand instead of a generic hex color code, #EA8433. Panda groups tokens into categories like colors, spacing, and radii, each shown below with its defaults. See Tokens for the full token format.

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 ships the Tailwind color palette, with eleven shades per hue. Click a swatch to copy its token name.

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:

To start from nothing instead of the default theme, see Minimal setup.