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.

panda.config.ts

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

Panda ships with the following breakpoints by default:

@media screen (min-width >= 640px)

@media screen (min-width >= 768px)

@media screen (min-width >= 1024px)

@media screen (min-width >= 1280px)

2xl

@media screen (min-width >= 1536px)

Tokens

Colors

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

💡

We recommend using numeric ranges from 50 to 900

panda.config.ts

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

rose

rose.50

#fff1f2

rose.100

#ffe4e6

rose.200

#fecdd3

rose.300

#fda4af

rose.400

#fb7185

rose.500

#f43f5e

rose.600

#e11d48

rose.700

#be123c

rose.800

#9f1239

rose.900

#881337

pink

pink.50

#fdf2f8

pink.100

#fce7f3

pink.200

#fbcfe8

pink.300

#f9a8d4

pink.400

#f472b6

pink.500

#ec4899

pink.600

#db2777

pink.700

#be185d

pink.800

#9d174d

pink.900

#831843

fuchsia

fuchsia.50

#fdf4ff

fuchsia.100

#fae8ff

fuchsia.200

#f5d0fe

fuchsia.300

#f0abfc

fuchsia.400

#e879f9

fuchsia.500

#d946ef

fuchsia.600

#c026d3

fuchsia.700

#a21caf

fuchsia.800

#86198f

fuchsia.900

#701a75

purple

purple.50

#f5f3ff

purple.100

#ede9fe

purple.200

#ddd6fe

purple.300

#c4b5fd

purple.400

#a78bfa

purple.500

#8b5cf6

purple.600

#7c3aed

purple.700

#6d28d9

purple.800

#5b21b6

purple.900

#4c1d95

indigo

indigo.50

#eef2ff

indigo.100

#e0e7ff

indigo.200

#c7d2fe

indigo.300

#a5b4fc

indigo.400

#818cf8

indigo.500

#6366f1

indigo.600

#4f46e5

indigo.700

#4338ca

indigo.800

#3730a3

indigo.900

#312e81

blue

blue.50

#eff6ff

blue.100

#dbeafe

blue.200

#bfdbfe

blue.300

#93c5fd

blue.400

#60a5fa

blue.500

#3b82f6

blue.600

#2563eb

blue.700

#1d4ed8

blue.800

#1e40af

blue.900

#1e3a8a

sky

sky.50

#f0f9ff

sky.100

#e0f2fe

sky.200

#bae6fd

sky.300

#7dd3fc

sky.400

#38bdf8

sky.500

#0ea5e9

sky.600

#0284c7

sky.700

#0369a1

sky.800

#075985

sky.900

#0c4a6e

cyan

cyan.50

#ecfeff

cyan.100

#cffafe

cyan.200

#a5f3fc

cyan.300

#67e8f9

cyan.400

#22d3ee

cyan.500

#06b6d4

cyan.600

#0891b2

cyan.700

#0e7490

cyan.800

#155e75

cyan.900

#164e63

teal

teal.50

#f0fdfa

teal.100

#ccfbf1

teal.200

#99f6e4

teal.300

#5eead4

teal.400

#2dd4bf

teal.500

#14b8a6

teal.600

#0d9488

teal.700

#0f766e

teal.800

#115e59

teal.900

#134e4a

green

green.50

#ecfdf5

green.100

#d1fae5

green.200

#a7f3d0

green.300

#6ee7b7

green.400

#34d399

green.500

#10b981

green.600

#059669

green.700

#047857

green.800

#065f46

green.900

#064e3b

lime

lime.50

#f7fee7

lime.100

#ecfccb

lime.200

#d9f99d

lime.300

#bef264

lime.400

#a3e635

lime.500

#84cc16

lime.600

#65a30d

lime.700

#4d7c0f

lime.800

#3f6212

lime.900

#365314

yellow

yellow.50

#fffbeb

yellow.100

#fef3c7

yellow.200

#fde68a

yellow.300

#fcd34d

yellow.400

#fbbf24

yellow.500

#f59e0b

yellow.600

#d97706

yellow.700

#b45309

yellow.800

#92400e

yellow.900

#78350f

orange

orange.50

#fff7ed

orange.100

#ffedd5

orange.200

#fed7aa

orange.300

#fdba74

orange.400

#fb923c

orange.500

#f97316

orange.600

#ea580c

orange.700

#c2410c

orange.800

#9a3412

orange.900

#7c2d12

red

red.50

#fef2f2

red.100

#fee2e2

red.200

#fecaca

red.300

#fca5a5

red.400

#f87171

red.500

#ef4444

red.600

#dc2626

red.700

#b91c1c

red.800

#991b1b

red.900

#7f1d1d

gray

gray.50

#f9fafb

gray.100

#f3f4f6

gray.200

#e5e7eb

gray.300

#d1d5db

gray.400

#9ca3af

gray.500

#6b7280

gray.600

#4b5563

gray.700

#374151

gray.800

#1f2937

gray.900

#111827

slate

slate.50

#F8FAFC

slate.100

#F1F5F9

slate.200

#E2E8F0

slate.300

#CBD5E1

slate.400

#94A3B8

slate.500

#64748B

slate.600

#475569

slate.700

#334155

slate.800

#1E293B

slate.900

#0F172A

Spacing

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

panda.config.ts

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

Panda ships with the following spacing tokens by default:

Name

Value

0.5

0.125rem

0.25rem

1.5

0.375rem

0.5rem

2.5

0.625rem

0.75rem

3.5

0.875rem

1rem

1.25rem

1.5rem

1.75rem

2rem

2.25rem

2.5rem

2.75rem

3rem

3.5rem

4rem

5rem

6rem

7rem

8rem

9rem

10rem

11rem

12rem

13rem

14rem

15rem

16rem

18rem

20rem

24rem

Border Radius

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

2xl

3xl

full

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 breakpoints by default:

0 1px 2px 0 rgb(0 0 0 / 0.05)

0 1px 3px 0 rgb(0 0 0 / 0.1)

0 1px 2px -1px rgb(0 0 0 / 0.1)

0 4px 6px -1px rgb(0 0 0 / 0.1)

0 2px 4px -2px rgb(0 0 0 / 0.1)

0 10px 15px -3px rgb(0 0 0 / 0.1)

0 4px 6px -4px rgb(0 0 0 / 0.1)

0 20px 25px -5px rgb(0 0 0 / 0.1)

0 8px 10px -6px rgb(0 0 0 / 0.1)

2xl

0 25px 50px -12px rgb(0 0 0 / 0.25)

inner

inset 0 2px 4px 0 rgb(0 0 0 / 0.05)

Sizing

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

panda.config.ts

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:

Name

Value

28rem

32rem

36rem

2xl

42rem

3xl

48rem

4xl

56rem

5xl

64rem

prose

65ch

6xl

72rem

7xl

80rem

8xl

90rem

full

100%

min

min-content

max

max-content

fit

fit-content

Fonts

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

panda.config.ts

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:

sans

ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"

serif

ui-serif, Georgia, Cambria, "Times New Roman", Times, serif

Ag

mono

ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace

Font Sizes

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

panda.config.ts

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:

2xs

0.5rem

0.75rem

0.875rem

1rem

1.125rem

1.25rem

2xl

1.5rem

3xl

1.875rem

4xl

2.25rem

5xl

3rem

6xl

3.75rem

7xl

4.5rem

8xl

6rem

9xl

8rem

Keyframes

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

panda.config.ts

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:

spin

ping

pulse

bounce

Presets Background