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

# Open-source templates

> Free, open-source booking website templates built on the Opencals Storefront API. Clone, customize, and deploy a production booking site in minutes.

Every template is a complete, production-grade booking website built on the
[Storefront API](/docs/api-reference/introduction) and the typed
[TypeScript SDK](/docs/guides/storefront-sdk). MIT-licensed — clone it, rebrand it,
ship it for yourself or your clients.

## How it works

<Steps>
  <Step title="Clone a template">
    Each template is a standalone Next.js repository on
    [GitHub](https://github.com/letsopencals).
  </Step>

  <Step title="Connect your store">
    Create a store in the [Opencals dashboard](https://opencals.com) and set
    your Storefront API key in the env vars. See
    [Authentication](/docs/authentication).
  </Step>

  <Step title="Deploy">
    One-click deploy to Vercel, or anywhere Next.js runs. Bookings, checkout,
    and payments work out of the box.
  </Step>
</Steps>

## Templates

<Card title="Haar — salon booking template" icon="scissors" href="/docs/open-source/haar" img="https://opencals-blog-media.s3.eu-west-2.amazonaws.com/seo-content/banners/1780825572505-Frame.png">
  A free beauty-salon booking website: services, staff and multi-location
  booking, customer accounts, and Stripe checkout. Next.js 15 + TypeScript.

  **[Live demo ↗](https://template-haar.vercel.app)** · **[GitHub ↗](https://github.com/letsopencals/template-haar)**
</Card>

<Card title="Frisor — barbershop booking template" icon="scissors" href="/docs/open-source/frisor" img="https://raw.githubusercontent.com/letsopencals/template-frisor/main/docs/homepage-hero.png">
  A free barbershop booking website: services and variants, barber and
  multi-location booking, add-ons at checkout, customer accounts, and Stripe
  checkout. Dark editorial design — Next.js 15 + TypeScript.

  **[Live demo ↗](https://template-frisor-sage.vercel.app)** · **[GitHub ↗](https://github.com/letsopencals/template-frisor)**
</Card>

<Note>
  More templates are on the way — spa, fitness, and tattoo studio are next.
  Want one prioritized?
  [Tell us](https://opencals.com/contact).
</Note>

## Quick start

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

  ```bash Install the SDK only theme={"theme":{"light":"github-light","dark":"github-dark-default"}}
  npm install @opencals/storefront-sdk
  ```
</CodeGroup>

Build something custom instead? Start from the
[booking page tutorial](/docs/guides/build-a-booking-page).