Customization

Theme

Add to a preset's breakpoints, tokens, keyframes and recipes with extend, or replace them without it.

Everything under a Panda config's theme key can be customized. Put your changes under theme.extend and Panda merges them into what a preset already defined. Write them directly under theme instead and yours replaces it.

Adding to the defaults

Put a new value under theme.extend.<key> and Panda merges it in alongside whatever's already there.

Breakpoints. Add a 3xl on top of the defaults (sm, md, lg, xl, 2xl):

panda.config.ts

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

Tokens. Add a brand color alongside every color Panda ships:

panda.config.ts

export default defineConfig({
  theme: {
    extend: {
      tokens: {
        colors: {
          brand: { value: '#EA8433' }
        }
      }
    }
  }
})

Keyframes. Add fadein alongside the defaults (spin, ping, pulse, bounce):

panda.config.ts

export default defineConfig({
  theme: {
    extend: {
      keyframes: {
        fadein: {
          '0%': { opacity: '0' },
          '100%': { opacity: '1' }
        }
      }
    }
  }
})

Recipes. Register a new config recipe without touching any recipe a preset already registered:

panda.config.ts

export default defineConfig({
  theme: {
    extend: {
      recipes: {
        button: buttonRecipe
      }
    }
  }
})

Recipes aren't tokens, so there's no default list to show. A fresh config has none until you or a preset registers one.

See every other token category (spacing, radii, shadows, sizing, fonts, font sizes) on Default Theme.

Overriding one value

The merge is per key, so you can replace a single entry and keep the rest of the category untouched.

Breakpoints. Redefine md from 768px to 800px. sm, lg, xl, and 2xl stay exactly as they were:

panda.config.ts

export default defineConfig({
  theme: {
    extend: {
      breakpoints: {
        md: '800px'
      }
    }
  }
})

Tokens. Redefine blue.500. Every other shade in the scale, blue.50 through blue.950, stays:

panda.config.ts

export default defineConfig({
  theme: {
    extend: {
      tokens: {
        colors: {
          blue: {
            500: { value: '#2563eb' }
          }
        }
      }
    }
  }
})

Keyframes. Redefine spin. ping, pulse, and bounce stay:

panda.config.ts

export default defineConfig({
  theme: {
    extend: {
      keyframes: {
        spin: {
          to: { transform: 'rotate(180deg)' }
        }
      }
    }
  }
})

Recipes. A preset's button recipe keeps its variants. Override just className, base, and jsx:

panda.config.ts

export default defineConfig({
  theme: {
    extend: {
      recipes: {
        button: {
          className: 'btn',
          base: { rounded: 'full' },
          jsx: ['Button', 'LinkButton']
        }
      }
    }
  }
})

Skipping extend

Skip extend and what you write replaces what a preset defined, rather than merging into it. You replace the thing you name, and its siblings are untouched.

One token scale. The preset's colors are gone and only brand is left. spacing, fonts and every other scale stay:

theme: {
  tokens: {
    colors: {
      brand: {
        value: '#EA8433'
      }
    }
  }
}

One recipe. Your button replaces the preset's, variants and all. Every other recipe it registered stays:

theme: {
  recipes: {
    button: buttonRecipe
  }
}

One keyframe. fadein replaces a preset keyframe of the same name. spin, ping, pulse and bounce stay:

theme: {
  keyframes: {
    fadein: {
      '0%': { opacity: '0' },
      '100%': { opacity: '1' }
    }
  }
}

Breakpoints are the exception, because a breakpoint is a single value rather than a definition you could replace. Write them without extend and the whole set goes, leaving only 3xl:

theme: {
  breakpoints: {
    '3xl': '1800px'
  }
}

Add extend back to any of these and the preset's values return, alongside whatever you added.

Starting from zero

Everything here assumes you're extending a preset's theme. For no default tokens, breakpoints, or keyframes at all, see Minimal setup.

Theme

Adding to the defaults

Overriding one value

Skipping extend

Starting from zero

See also