> ## Documentation Index
> Fetch the complete documentation index at: https://docs.fastapps.org/llms.txt
> Use this file to discover all available pages before exploring further.

# Templates

> Create widgets quickly using pre-built templates

## Create widget from a template

FastApps provides several pre-built templates to help you get started quickly. Instead of creating a widget from scratch, you can use a template that includes common patterns and best practices.

## Available Templates

### List Template

Create a vertical list widget with items:

```bash theme={null}
uv run fastapps create my-list --template list
```

This template creates a widget that displays items in a vertical list format, perfect for displaying collections of data like tasks, products, or any list-based content.

<div style={{ margin: '1rem 0' }}>
  <img src="https://mintcdn.com/dooilabs/p_0OY7znmYEzBmNN/images/template-list.png?fit=max&auto=format&n=p_0OY7znmYEzBmNN&q=85&s=b6b535970490adf672bc63f28de57064" alt="List Template" style={{ width: '100%', borderRadius: '8px', boxShadow: '0 0 10px rgba(0, 0, 0, 0.1)' }} width="1472" height="830" data-path="images/template-list.png" />
</div>

### Carousel Template

Create a horizontal scrolling cards widget:

```bash theme={null}
uv run fastapps create my-carousel --template carousel
```

This template creates a widget with horizontal scrolling cards, ideal for showcasing multiple items in a compact, interactive format.

<div style={{ margin: '1rem 0' }}>
  <img src="https://mintcdn.com/dooilabs/p_0OY7znmYEzBmNN/images/template-carousel.png?fit=max&auto=format&n=p_0OY7znmYEzBmNN&q=85&s=db19701d2605eeb4c3a7a86074879014" alt="Carousel Template" style={{ width: '100%', borderRadius: '8px', boxShadow: '0 0 10px rgba(0, 0, 0, 0.1)' }} width="1475" height="718" data-path="images/template-carousel.png" />
</div>

### Albums Template

Create a photo gallery viewer:

```bash theme={null}
uv run fastapps create my-albums --template albums
```

This template creates a photo gallery widget that allows users to browse through images in an organized, visually appealing way.

<div style={{ margin: '1rem 0' }}>
  <img src="https://mintcdn.com/dooilabs/p_0OY7znmYEzBmNN/images/template-album.png?fit=max&auto=format&n=p_0OY7znmYEzBmNN&q=85&s=f751ed468af89f4ecee58ac38d749e64" alt="Albums Template" style={{ width: '100%', borderRadius: '8px', boxShadow: '0 0 10px rgba(0, 0, 0, 0.1)' }} width="1431" height="472" data-path="images/template-album.png" />
</div>

## What Gets Created

When you use a template, FastApps generates:

* `widgets/<widget-name>/index.jsx` - Pre-configured React component based on the template
* `server/tools/<widget-name>_tool.py` - Python backend tool with example data structure

## Customizing Templates

After creating a widget from a template, you can:

1. Modify the React component in `widgets/<widget-name>/index.jsx` to match your design needs
2. Update the Python tool in `server/tools/<widget-name>_tool.py` to connect to your data source
3. Add additional features and interactions as needed

## Next Steps

<CardGroup cols={2}>
  <Card title="Widget Basics" icon="book" href="/widgets/basics/index">
    Learn the fundamentals of widgets
  </Card>

  <Card title="React Hooks" icon="code" href="/widgets/react-hooks/index">
    Master the hook system
  </Card>
</CardGroup>