Overview
You'll learn what recipes are, the difference between classic recipes and slot recipes, and how to extend Chakra’s built-in component styles to fit your brand.
Key Takeaways
Recipes are style blueprints that define how a component should look and behave.
There are two types of recipes:
- Classic Recipes → for single-part components (e.g.,
<Button>) - Slot Recipes → for multi-part components (e.g.,
Menu.Item,Tabs.List)
Recipe Properties
Each recipe has the following properties:
base: Think of base as the common styles a component has regardless of the variationsvariants: are a way to map out the different variations of the componentdefaultVariants: set the initial variant combination that can overridden as needed.
Extending recipes allows you to create your own component variations without repeating styles across your project.