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': '1800px'
      }
    }
  }
})

Panda ships with the following breakpoints by default:

sm
@media screen (min-width >= 640px)
md
@media screen (min-width >= 768px)
lg
@media screen (min-width >= 1024px)
xl
@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
rose.950
#4c0519

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
pink.950
#500724

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
fuchsia.950
#4a044e

purple

purple.50
#faf5ff
purple.100
#f3e8ff
purple.200
#e9d5ff
purple.300
#d8b4fe
purple.400
#c084fc
purple.500
#a855f7
purple.600
#9333ea
purple.700
#7e22ce
purple.800
#6b21a8
purple.900
#581c87
purple.950
#3b0764

violet

violet.50
#f5f3ff
violet.100
#ede9fe
violet.200
#ddd6fe
violet.300
#c4b5fd
violet.400
#a78bfa
violet.500
#8b5cf6
violet.600
#7c3aed
violet.700
#6d28d9
violet.800
#5b21b6
violet.900
#4c1d95
violet.950
#2e1065

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
indigo.950
#1e1b4b

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
blue.950
#172554

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
sky.950
#082f49

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
cyan.950
#083344

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
teal.950
#042f2e

emerald

emerald.50
#ecfdf5
emerald.100
#d1fae5
emerald.200
#a7f3d0
emerald.300
#6ee7b7
emerald.400
#34d399
emerald.500
#10b981
emerald.600
#059669
emerald.700
#047857
emerald.800
#065f46
emerald.900
#064e3b
emerald.950
#022c22

green

green.50
#f0fdf4
green.100
#dcfce7
green.200
#bbf7d0
green.300
#86efac
green.400
#4ade80
green.500
#22c55e
green.600
#16a34a
green.700
#15803d
green.800
#166534
green.900
#14532d
green.950
#052e16

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
lime.950
#1a2e05

yellow

yellow.50
#fefce8
yellow.100
#fef9c3
yellow.200
#fef08a
yellow.300
#fde047
yellow.400
#facc15
yellow.500
#eab308
yellow.600
#ca8a04
yellow.700
#a16207
yellow.800
#854d0e
yellow.900
#713f12
yellow.950
#422006

amber

amber.50
#fffbeb
amber.100
#fef3c7
amber.200
#fde68a
amber.300
#fcd34d
amber.400
#fbbf24
amber.500
#f59e0b
amber.600
#d97706
amber.700
#b45309
amber.800
#92400e
amber.900
#78350f
amber.950
#451a03

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
orange.950
#431407

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
red.950
#450a0a

neutral

neutral.50
#fafafa
neutral.100
#f5f5f5
neutral.200
#e5e5e5
neutral.300
#d4d4d4
neutral.400
#a3a3a3
neutral.500
#737373
neutral.600
#525252
neutral.700
#404040
neutral.800
#262626
neutral.900
#171717
neutral.950
#0a0a0a

stone

stone.50
#fafaf9
stone.100
#f5f5f4
stone.200
#e7e5e4
stone.300
#d6d3d1
stone.400
#a8a29e
stone.500
#78716c
stone.600
#57534e
stone.700
#44403c
stone.800
#292524
stone.900
#1c1917
stone.950
#0c0a09

zinc

zinc.50
#fafafa
zinc.100
#f4f4f5
zinc.200
#e4e4e7
zinc.300
#d4d4d8
zinc.400
#a1a1aa
zinc.500
#71717a
zinc.600
#52525b
zinc.700
#3f3f46
zinc.800
#27272a
zinc.900
#18181b
zinc.950
#09090b

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
gray.950
#030712

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
slate.950
#020617

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

Pixel

0

0rem

0px

0.5

0.125rem

2px

1

0.25rem

4px

1.5

0.375rem

6px

2

0.5rem

8px

2.5

0.625rem

10px

3

0.75rem

12px

3.5

0.875rem

14px

4

1rem

16px

5

1.25rem

20px

6

1.5rem

24px

7

1.75rem

28px

8

2rem

32px

9

2.25rem

36px

10

2.5rem

40px

11

2.75rem

44px

12

3rem

48px

14

3.5rem

56px

16

4rem

64px

20

5rem

80px

24

6rem

96px

28

7rem

112px

32

8rem

128px

36

9rem

144px

40

10rem

160px

44

11rem

176px

48

12rem

192px

52

13rem

208px

56

14rem

224px

60

15rem

240px

64

16rem

256px

72

18rem

288px

80

20rem

320px

96

24rem

384px

Border Radius

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

xs

0.125rem (2px)

sm

0.25rem (4px)

md

0.375rem (6px)

lg

0.5rem (8px)

xl

0.75rem (12px)

2xl

1rem (16px)

3xl

1.5rem (24px)

4xl

2rem (32px)

full

9999px (9999px)

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:

xs

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

sm

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

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

md

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

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

lg

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

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

xl

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

Pixel

md

28rem

448px

lg

32rem

512px

xl

36rem

576px

2xl

42rem

672px

3xl

48rem

768px

4xl

56rem

896px

5xl

64rem

1024px

prose

65ch

65ch

6xl

72rem

1152px

7xl

80rem

1280px

8xl

90rem

1440px

full

100%

100%

min

min-content

min-content

max

max-content

max-content

fit

fit-content

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:

Ag

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"

Ag

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

Ag

xs

0.75rem

Ag

sm

0.875rem

Ag

md

1rem

Ag

lg

1.125rem

Ag

xl

1.25rem

Ag

2xl

1.5rem

Ag

3xl

1.875rem

Ag

4xl

2.25rem

Ag

5xl

3rem

Ag

6xl

3.75rem

Ag

7xl

4.5rem

Ag

8xl

6rem

Ag

9xl

8rem

Ag

Keyframes

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

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

Minimal setup

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