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

# Haar — salon booking template

> Free, open-source beauty salon booking website template. Next.js 15, Stripe checkout, staff and multi-location booking, customer accounts — built on the Opencals Storefront API.

A complete salon booking website you can clone and deploy today. Haar is the
reference implementation of the [Storefront API](/docs/api-reference/introduction):
every screen — services, staff picker, time slots, cart, checkout, customer
account — is built with the public API and the
[TypeScript SDK](/docs/guides/storefront-sdk).

<CardGroup cols={3}>
  <Card title="Live demo" icon="external-link" href="https://template-haar.vercel.app">
    template-haar.vercel.app
  </Card>

  <Card title="Source code" icon="github" href="https://github.com/letsopencals/template-haar">
    letsopencals/template-haar (MIT)
  </Card>

  <Card title="Deploy to Vercel" icon="rocket" href="https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fletsopencals%2Ftemplate-haar">
    One-click deploy
  </Card>
</CardGroup>

<Frame caption="Haar — landing page">
  <img src="https://opencals-blog-media.s3.eu-west-2.amazonaws.com/seo-content/banners/1780825572505-Frame.png" alt="Haar salon booking website template — landing page" />
</Frame>

<Frame caption="Service and staff booking flow">
  <img src="https://opencals-blog-media.s3.eu-west-2.amazonaws.com/seo-content/inline/1780833670593-Screenshot_2026-06-07_at_13.43.45.png" alt="Haar template booking flow with services, staff and time slots" />
</Frame>

## What's inside

| Feature                        | Notes                                                         |
| ------------------------------ | ------------------------------------------------------------- |
| Service catalog                | Driven by the Products + Product Collections endpoints        |
| Staff & multi-location booking | Staff Members + Locations endpoints                           |
| Real-time availability         | Appointments endpoints                                        |
| Cart & Stripe checkout         | Cart + Checkout + Payment endpoints, deposits supported       |
| Customer accounts              | Self-Service endpoints — bookings, reschedules, cancellations |
| Stack                          | Next.js 15, TypeScript, Tailwind, `@opencals/storefront-sdk`  |

## Get started

<Steps>
  <Step title="Clone and install">
    ```bash theme={"theme":{"light":"github-light","dark":"github-dark-default"}}
    git clone https://github.com/letsopencals/template-haar.git
    cd template-haar
    npm install
    ```
  </Step>

  <Step title="Add your API key">
    Create a store in the [Opencals dashboard](https://opencals.com), grab a
    Storefront API key (see [Authentication](/docs/authentication)), and set it in
    `.env.local`.
  </Step>

  <Step title="Run it">
    ```bash theme={"theme":{"light":"github-light","dark":"github-dark-default"}}
    npm run dev
    ```

    Your salon's real services, staff, and availability render immediately.
  </Step>

  <Step title="Deploy">
    Push to your own repo and
    [deploy to Vercel](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fletsopencals%2Ftemplate-haar),
    or host anywhere Next.js runs.
  </Step>
</Steps>

## Make it yours

The template is MIT-licensed: rebrand it, restructure it, or use it as a
starting point for client work. Agencies can run one codebase against multiple
stores — each deployment just points at a different API key. To go deeper than
theming, follow the [booking page tutorial](/docs/guides/build-a-booking-page) to
understand the API calls behind each screen.