Skip to main content
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 — storefront and booking flow

Haar — the storefront and booking flow, on tablet and mobile

Haar template booking composer with day ribbon, time slots and live appointment card

The consultation-card booking composer

Haar template checkout with customer details, payment options and appointment cards

Checkout — card, pay at the salon or bank transfer

​
What’s inside

​
Get started

1

Clone and install

2

Add your API key

Create a store in the Opencals dashboard, grab a private storefront key (spk_, see API keys), and set it in .env.local.
3

Run it

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

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 October 24, 2026