> For the complete documentation index, see [llms.txt](https://docs.aurelia.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.aurelia.io/components/component-recipes/recipes.md).

# 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**](/components/component-recipes/dropdown-menu.md): A fully-featured dropdown with keyboard navigation and accessibility
* [**Modal Dialog**](/components/component-recipes/modal-dialog.md): 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**](/components/component-recipes/accordion.md): 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](/components/components.md)
* [Bindable properties](/components/bindable-properties.md)
* [Template syntax](/templates/overview.md)
* [Dependency injection](/introduction/essentials/dependency-injection.md)

## 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!


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.aurelia.io/components/component-recipes/recipes.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.