Recipes are components that compose Eddie core components into product-specific patterns. They fill gaps when a UI pattern doesn't exist in the core library.

When to Use a Recipe

If you need a UI pattern that Eddie core doesn't provide, create a recipe instead of writing custom CSS in your consumer project. This keeps all component styles within the design system.

Recipe Conventions

• Tag prefix: ed-r- (e.g., <ed-r-site-header>)
• CSS class prefix: ed-r-c- (e.g., .ed-r-c-site-header)
• Base class: Extend EdElement (same as core components)
• Location: packages/eddie-recipes/recipes/<project-name>/
• Scaffold: npm run eddie-recipes:plop

Available Recipes

Recipes are organized by project. Browse the full list with interactive examples and API docs in Storybook:

Browse Recipes in Storybook →

Creating a Recipe

This scaffolds the component file, SCSS file, and stories file following Eddie conventions. Recipes follow the same BEM/BEMIT, flat SCSS, and design token conventions as core components.