Panda CSS Design System

Build type-safe, zero-runtime CSS with Panda CSS. Creates design tokens, recipes, slot recipes, and responsive patterns with compile-time CSS extraction — no runtime overhead from the Chakra UI team.

This skill helps you build design systems with Panda CSS. It defines design tokens (colors, spacing, typography), creates recipe-based component variants, implements responsive patterns, generates utility classes, and migrates from runtime CSS-in-JS libraries to zero-runtime extraction.

When to use

Use when building design systems with type-safe tokens, creating component variant APIs, migrating from styled-components/Emotion to zero-runtime CSS, or when you need Tailwind-like utility classes with custom design tokens.

Examples

Design token system

Create a complete token-based design system

Set up Panda CSS with semantic design tokens for colors, spacing, typography, and shadows — with light and dark theme support

Component recipes

Build variant-based component styles

Create Panda CSS recipes for Button, Badge, and Card components with size, variant, and color scheme variants