# Recipes Overview

This section contains practical, real-world examples of building reusable UI components in Aurelia. Each recipe shows you how to create a complete, production-ready component from scratch.

## What You'll Find Here

These recipes demonstrate:

* **Best practices** for component architecture
* **Accessibility** considerations
* **TypeScript** with proper typing
* **Testing** patterns for each component
* **Real-world** features and edge cases

## Available Recipes

### UI Components

* [**Dropdown Menu**](https://docs.aurelia.io/components/component-recipes/dropdown-menu): A fully-featured dropdown with keyboard navigation and accessibility
* [**Modal Dialog**](https://docs.aurelia.io/components/component-recipes/modal-dialog): A flexible modal system with backdrop, animations, and focus management
* [**Tabs Component**](https://github.com/aurelia/aurelia/blob/master/docs/user-docs/components/recipes/tabs-component.md): An accessible tab interface with dynamic content
* [**Tooltip**](https://github.com/aurelia/aurelia/blob/master/docs/user-docs/components/recipes/tooltip.md): Position-aware tooltips with smart placement
* [**Accordion**](https://docs.aurelia.io/components/component-recipes/accordion): Collapsible content panels with smooth animations

## How to Use These Recipes

Each recipe includes:

1. **Overview**: What the component does and when to use it
2. **Complete Code**: TypeScript and HTML for the component
3. **Usage Examples**: How to consume the component
4. **Styling**: Base CSS to get you started
5. **Testing**: How to test the component
6. **Enhancements**: Ideas for extending the component

## Prerequisites

These recipes assume you're familiar with:

* [Aurelia components](https://docs.aurelia.io/components/components)
* [Bindable properties](https://docs.aurelia.io/components/bindable-properties)
* [Template syntax](https://docs.aurelia.io/templates/overview)
* [Dependency injection](https://docs.aurelia.io/introduction/essentials/dependency-injection)

## Code Standards

All recipes follow Aurelia 2 best practices:

* Use `resolve()` for dependency injection (not decorators)
* No `<template>` wrappers in HTML files
* Named exports for reusable components
* Proper cleanup in `detaching()` lifecycle hooks
* Accessible markup with ARIA attributes

## Contributing

Have a component recipe you'd like to share? Contributions are welcome! Make sure your recipe includes:

* Complete, working code
* Accessibility considerations
* Usage examples
* Tests
* Clear explanations

***

Ready to build something? Pick a recipe and start coding!