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

# Start faster with Genie templates

> Choose a ready-made starting point for your app — portfolios, dashboards, CRMs, trackers, and more — then customize it with follow-up prompts.

Templates give you a complete, well-structured starting point instead of a blank prompt. Each template is a proven layout built for a specific type of tool or page. You pick the one closest to what you need, Genie generates it, and you refine from there with follow-up prompts. It's the fastest way to go from idea to working app.

## How to use a template

<Steps>
  <Step title="Browse the template gallery">
    From your Genie dashboard, click **Templates** in the sidebar or the navigation bar. Templates are organized by category so you can find the right starting point quickly.
  </Step>

  <Step title="Select a template">
    Click any template card to see a description of what it includes — the layout, the sections, and the interactions it supports. When you find one that fits, click **Use this template**.
  </Step>

  <Step title="Genie generates your app">
    Genie runs the template's built-in prompt and generates your app. The live preview opens automatically when generation finishes.
  </Step>

  <Step title="Customize with follow-up prompts">
    The template is your starting point, not your final version. Type follow-up prompts to adjust colors, rename sections, add fields, or restructure the layout to match your needs exactly.
  </Step>
</Steps>

<Tip>
  Every template is generated from a plain-English prompt — the same kind you'd write yourself. You can see and modify the prompt before generating if you want to adjust the starting point.
</Tip>

## Template categories

Templates are organized into six categories based on the type of tool or audience.

<Tabs>
  <Tab title="Startup">
    Templates for founders and early-stage teams who need landing pages, dashboards, and lightweight product tools quickly.

    <CardGroup cols={2}>
      <Card title="Startup Launchpad" icon="rocket">
        Build a startup landing page with gradient hero, 3 feature blocks, social proof, pricing toggle, and sticky CTA bar.

        **Tags:** Hero · Features · CTA
      </Card>

      <Card title="Micro SaaS Dashboard UI" icon="chart-bar">
        Create a frontend-only sample dashboard: sidebar nav, KPI stat cards, charts, activity list, and data table.

        **Tags:** Dashboard · Charts · Navigation
      </Card>

      <Card title="Task Tracker Mini App" icon="circle-check">
        Build a task management app with kanban board columns, draggable cards, tag filters, and stats summary.

        **Tags:** Tasks · Board · Filters
      </Card>
    </CardGroup>
  </Tab>

  <Tab title="Consulting">
    Templates for freelancers and agencies who need to present their work professionally and manage client relationships.

    <CardGroup cols={2}>
      <Card title="Freelancer Portfolio" icon="briefcase">
        Build a freelancer portfolio with split hero, services list, case study cards, testimonial strip, and contact form.

        **Tags:** Portfolio · Services · Case Studies
      </Card>

      <Card title="Agency Showcase" icon="building-2">
        Build an agency site with hero, process timeline, case study slider, metrics strip, and contact form panel.

        **Tags:** Case Studies · Process · Contact
      </Card>

      <Card title="Mini CRM Contacts" icon="book-user">
        Create a mini CRM interface with contact table, segment filters, and right-side drawer with activity timeline.

        **Tags:** Contacts · Segments · Notes
      </Card>

      <Card title="Client Portal Lite" icon="folder-open">
        Create a mini client portal with tabbed interface for files, messages, tasks, and overview.

        **Tags:** Portal · Files · Tasks
      </Card>
    </CardGroup>
  </Tab>

  <Tab title="Small business">
    Templates for shop owners and operators who need practical day-to-day tools.

    <CardGroup cols={2}>
      <Card title="Recipe Organizer" icon="utensils">
        Build a recipe mini app with searchable list, tag filter chips, recipe detail panel, and favorites.

        **Tags:** Recipes · Search · Tags
      </Card>

      <Card title="Inventory Lite" icon="package">
        Build a lightweight inventory manager with stock table, low-stock highlights, and bulk edit.

        **Tags:** Inventory · Table · Filters
      </Card>
    </CardGroup>
  </Tab>

  <Tab title="Marketing">
    Templates for marketers who need campaign tools, lead capture pages, and quiz experiences.

    <CardGroup cols={2}>
      <Card title="Quiz Builder" icon="flask-conical">
        Build a quiz builder with question list, editor, preview mode, and results summary.

        **Tags:** Quiz · Builder · Form
      </Card>

      <Card title="UTM Link Tracker" icon="link">
        Create a UTM builder with form inputs, real-time preview, copy button, and saved links list.

        **Tags:** UTM · Builder · Links
      </Card>
    </CardGroup>
  </Tab>

  <Tab title="Fun">
    Templates for personal projects, creative portfolios, and hobby apps.

    <CardGroup cols={2}>
      <Card title="Just for Fun Portfolio" icon="palette">
        Make a playful personal portfolio with colorful hero, project grid, about section with badges, and animated hover effects.

        **Tags:** Portfolio · Animations · Playful
      </Card>

      <Card title="Blog Magazine" icon="newspaper">
        Build a modern blog magazine layout with featured hero article, masonry grid, category filter pills, and newsletter signup.

        **Tags:** Articles · Categories · Search
      </Card>

      <Card title="Habit Tracker" icon="flame">
        Create a habit tracker with habit list, monthly completion grid, streak counter, and progress rings.

        **Tags:** Habits · Progress · Streak
      </Card>

      <Card title="Idea Vault" icon="lightbulb">
        Build an idea vault with masonry card grid, add idea modal, and sort by score.

        **Tags:** Ideas · Tags · Scoring
      </Card>
    </CardGroup>
  </Tab>
</Tabs>

## All templates at a glance

| Template                | Category       | What it includes                                                             |
| ----------------------- | -------------- | ---------------------------------------------------------------------------- |
| Startup Launchpad       | Startup        | Gradient hero, feature blocks, social proof, pricing toggle, sticky CTA      |
| Micro SaaS Dashboard UI | Startup        | Sidebar nav, KPI cards, charts, activity list, data table                    |
| Task Tracker Mini App   | Startup        | Kanban board, draggable cards, tag filters, stats summary                    |
| Freelancer Portfolio    | Consulting     | Split hero, services list, case study cards, testimonial strip, contact form |
| Agency Showcase         | Consulting     | Hero, process timeline, case study slider, metrics strip, contact form       |
| Mini CRM Contacts       | Consulting     | Contact table, segment filters, activity timeline drawer                     |
| Client Portal Lite      | Consulting     | Tabbed interface: files, messages, tasks, overview                           |
| Recipe Organizer        | Small business | Searchable list, tag filters, detail panel, favorites                        |
| Inventory Lite          | Small business | Stock table, low-stock highlights, bulk edit                                 |
| Quiz Builder            | Marketing      | Question editor, preview mode, results summary                               |
| UTM Link Tracker        | Marketing      | UTM form, real-time preview, copy button, saved links                        |
| Just for Fun Portfolio  | Fun            | Colorful hero, project grid, about section, hover animations                 |
| Blog Magazine           | Fun            | Featured article, masonry grid, category filters, newsletter signup          |
| Habit Tracker           | Fun            | Habit list, monthly grid, streak counter, progress rings                     |
| Idea Vault              | Fun            | Masonry card grid, add idea modal, score sorting                             |

## Customizing a template

Every template is a starting point. After generating, you can use follow-up prompts to change anything:

<AccordionGroup>
  <Accordion title="Change the color scheme">
    Type something like: `"Change the color scheme to teal and off-white"` or `"Use a dark background with amber accents"`.
  </Accordion>

  <Accordion title="Add or remove sections">
    Type: `"Add a testimonials section below the feature blocks"` or `"Remove the pricing toggle and replace it with a single CTA button"`.
  </Accordion>

  <Accordion title="Rename fields and labels">
    Type: `"Rename 'Projects' to 'Clients' throughout the app"` or `"Change the kanban columns from Backlog/In Progress/Done to New/Active/Closed"`.
  </Accordion>

  <Accordion title="Add new functionality">
    Type: `"Add a search bar to the contact table"` or `"Add a monthly view to the habit tracker alongside the existing grid"`.
  </Accordion>
</AccordionGroup>

<Note>
  Templates don't include a live backend by default — they use local mock data to demonstrate the interface. To connect real data storage, user logins, or payment processing, use follow-up prompts to add those features, or explore [Genie Cloud](/cloud/overview).
</Note>

## Next steps

<CardGroup cols={2}>
  <Card title="Write your first prompt" icon="pencil" href="/quickstart">
    Learn how to write prompts that get great results on the first generation.
  </Card>

  <Card title="Explore Genie Cloud" icon="cloud" href="/cloud/overview">
    Add a real database, authentication, or file storage to any app you build.
  </Card>
</CardGroup>