Haar — salon booking template - Opencals Developer Docs

A complete salon booking website you can clone and deploy today. Haar is the reference implementation of the Storefront API: every screen — services, staff picker, time slots, cart, checkout, customer account — is built with the public API and the TypeScript SDK.

Live demo

template-haar.vercel.app

Source code

letsopencals/template-haar (MIT)

Deploy to Vercel

One-click deploy

Haar salon booking website template — landing page — Haar — landing page

Haar template booking flow with services, staff and time slots — Service and staff booking flow

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

Clone and install

git clone https://github.com/letsopencals/template-haar.git
cd template-haar
npm install

Add your API key

Create a store in the Opencals dashboard, grab a Storefront API key (see Authentication), and set it in .env.local.

Run it

npm run dev

Your salon’s real services, staff, and availability render immediately.

Deploy

Push to your own repo and deploy to Vercel, or host anywhere Next.js runs.

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 to understand the API calls behind each screen.

Last modified on June 13, 2026

Open-source templates Frisor — barbershop booking template

Live demo

Source code

Deploy to Vercel

​What’s inside

​Get started

​Make it yours

What’s inside

Get started

Make it yours