Building a design system with Panda

A design system, in the preset sense, ships a language: tokens, semantic tokens, recipes, conditions, patterns, a definePreset config with no components and no CSS of its own. Consumers install it, add it to their own presets array, and build their own components against it. That's the opposite of a component library, which ships finished, framework-locked components. If you're building compiled <Button>s and <Card>s, you want that page instead; if you're building the vocabulary another team uses to build their own, you're in the right place.

Nothing stops a mature design system from shipping both, a components package built on top of its own preset. That's common, but it's still two separate things: the preset is the contract, the components are one particular implementation of it.

Author a preset

Everything about writing definePreset, the available keys, publishing, and extending a preset in a consuming app is covered in depth at Presets, including a full end-to-end example from an empty package to an app consuming it. This page won't repeat that, start there for the authoring walkthrough.

A few things worth knowing before you do:

• Tokens and multi-brand theming live in the Theming tab, a preset is usually where you define the token set a multi-brand app themes on top of. See Multiple Themes & multi-brand if your design system needs to support more than one brand or theme.
• theme.extend is how a consuming app layers its own tokens on top of your preset without forking it. See The extend keyword and Theme config.
• Recipes in a preset use defineRecipe / defineSlotRecipe, the config form, not the colocated cva/sva form a component library would use. See Recipes and Slot Recipes for the distinction.

Consuming a design system

If the package ran panda lib and ships components plus a manifest, the app writes designSystem: '@acme/ds'. See Consume a design system.

If you only ship a preset, consumers still add it to presets themselves. See Presets.

See also

• Ecosystem Plugins for extending the engine itself, rather than shipping a design language on top of it.
• Presets for the authoring walkthrough this page points to throughout.