# Haar: a free, open-source booking website for salons > A free, open-source beauty salon booking website template — Next.js 15, Stripe checkout, staff and multi-location booking, customer accounts. Built on Opencals. Clone and deploy to Vercel. URL: https://opencals.com/blog/templates/haar Author: Stanislav Tyshchenko Published: 2026-06-07 Updated: 2026-09-05 Categories: engineering, announcement When we shipped the [Opencals Storefront API](https://opencals.com/developers), we didn't want the first thing developers saw to be a blank file and a docs tab. So we built a real site on the API and open-sourced the whole thing. It's called **Haar** — a production-ready booking website for a beauty salon, free and MIT-licensed on GitHub. You can [see it live](https://template-haar.vercel.app/), clone it, rebrand it in an afternoon, and deploy your own. It's also the reference implementation for the API: if you want to know how to wire a real booking flow, read how Haar does it. > **Key takeaway** > > Haar is a free, open-source salon booking site built with Next.js and the Opencals Storefront SDK. Online booking, staff and location selection, Stripe checkout, and customer accounts — all working out of the box. Clone it, add an API key, deploy to Vercel, and you have a fully functional booking business. Rebranding is one config file. ## What you get Haar isn't a landing page with a "book now" button that goes nowhere. It's the whole thing. **A real booking flow** Customers browse services, pick a location and a staff member, choose a date and a time slot, enter their details, and pay — in one smooth, animated flow. Services can have variants (a 'Haircut' with Standard and Premium options), each with its own price, duration, and assigned staff. **Multi-location and staff-aware** A global location selector in the header, staff filtered by location, and per-location availability. The kind of logic that's painful to build by hand is already wired to the API — pick a location, the services and time slots update accordingly. **Checkout, accounts, and the boring-but-essential parts** Multi-step Stripe checkout with custom questions. Customer accounts where people sign in, see upcoming appointments, browse order history, and reschedule or cancel. Mobile-first responsive design. SEO handled — per-page metadata, Open Graph and Twitter cards, JSON-LD structured data, robots.txt, and a sitemap, all configured. ![Haar homepage — hero section with booking CTA](https://media.opencals.com/seo-content/inline/1780833670593-Screenshot_2026-06-07_at_13.43.45.png?w=3840\&q=75) ## Live in three steps No code required. If you want the full development setup, skip to the [For developers](#for-developers) section below. ### No-code: deploy to Vercel in five minutes 1. **Create a free Opencals account**: Sign up at app.opencals.com/sign-up and create a Dev Store. When prompted for a dataset, choose "HAAR Salon" — it seeds your store with sample services, staff, and locations so your site looks exactly like the live demo from minute one. Free forever, no credit card required. 2. **Get your API key**: In your Opencals account settings, generate a Storefront API key. It starts with sfk\_. Copy it — you'll need it in the next step. 3. **Deploy to Vercel**: Click the Deploy button in the Haar README on GitHub. Paste your sfk\_ key when Vercel asks for environment variables. Vercel builds the site in about two minutes and you're live — the same booking site running at template-haar.vercel.app, now under your own account. [Deploy to Vercel](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fletsopencals%2Ftemplate-haar\&env=OPENCALS_API_KEY,AUTH_SECRET\&envDescription=API%20key%20from%20your%20Opencals%20dashboard%20and%20a%20random%20secret%20for%20auth\&envLink=https%3A%2F%2Fgithub.com%2Fopencals%2Ftemplates%2Fblob%2Fmain%2Fhaar-salon-template%2FREADME.md%23environment-variables\&project-name=haar-salon\&repository-name=haar-salon) ### For developers If you prefer to work locally first, scaffold the project with one command: ```bash npx create-next-app -e https://github.com/letsopencals/template-haar cd haar-salon cp .env.example .env # add your sfk_ key npm run dev ``` Open `http://localhost:3000` and you have the full site running against your dev store. From here, edit `lib/site-config.ts` to rebrand it, or start reading the source to understand how the booking flow is wired. > **Use the same API key** > > The sfk\_ key you get in step 2 works for both the Vercel deploy and local development. One key, two environments. ## Rebranding is one file This is the part we're proud of. Every salon-specific thing — the name, tagline, logo, homepage hero, testimonials, team members, contact details, hours, footer and social links — lives in a single `lib/site-config.ts`. Edit that one file and the whole site is rebranded. Colors are CSS custom properties in `app/globals.css`: ```css @theme { --color-accent: #E8530E; /* your brand color */ --color-cream: #F5F0EB; --color-charcoal: #1A1A1A; --font-display: 'Playfair Display', Georgia, serif; --font-body: 'Inter', system-ui, sans-serif; } ``` Change the accent, swap the fonts, update the config — and Haar stops looking like Haar and starts looking like your business. No find-and-replace through twenty components. > **For agencies** > > This is the fast lane for client work. Take Haar, rebrand it to a salon, barbershop, or spa client in an afternoon, point it at their Opencals store, and ship a custom booking site for a fraction of the build time. It's MIT-licensed — client work built on it is yours. ## It's also the reference implementation If you're building your own front end instead of using the template, Haar is the best documentation we have. Want to see how to render an availability picker that respects staff and location? How to manage a cart and run a multi-step Stripe checkout? How to gate the account pages behind customer auth? It's all in there, in readable Next.js, calling the same [Storefront API](https://api.opencals.com/docs/storefront) you'll be using. The project structure is conventional — contexts for cart, checkout, location, and timezone state; hooks for API requests and date formatting; a thin `lib/opencals.ts` that sets up the SDK client. Nothing exotic. ## This is the first of many Haar is a beauty salon, but it's a starting point, not the whole plan. The booking engine underneath is industry-agnostic, so the next templates are mostly a matter of design and copy: barbershops, tattoo studios, spas, rentals, fitness and class booking. Each one is a new free template on GitHub and a new way to show what you can build on Opencals. If you build something with it — a client site, a different vertical, a wild customization — we'd genuinely like to see it. - [View the live demo](https://template-haar.vercel.app/): The full booking site, running. - [Get the template on GitHub](https://github.com/letsopencals/template-haar): Free, MIT-licensed. Clone and deploy. - [Storefront API docs](https://api.opencals.com/docs/storefront): The API powering the booking engine. - [Storefront SDK on npm](https://www.npmjs.com/package/@opencals/storefront-sdk): @opencals/storefront — the JS/TS SDK. - [Get a free API key](https://app.opencals.com/sign-up): Dev keys are free. No credit card. - [Developer portal](https://opencals.com/developers): Docs, guides, and API reference. ## Frequently asked questions ## Frequently asked questions ### Is the Haar template really free? Yes. The template is MIT-licensed and free on GitHub — clone it, sell client work built on it, modify it, no strings. You'll need an Opencals account to power the bookings (dev keys are free), but the template code itself costs nothing. ### Do I need to know how to code to use it? To go fully custom, some Next.js familiarity helps. But the happy path is light: create an Opencals account, generate an API key, click Deploy to Vercel, and paste the key in. Rebranding — name, colors, copy, team, hours — is editing one config file. No API code required to get a working site. ### What's included in the template? A complete booking site: homepage, service listing with location filter, a booking page with date/time/staff pickers, multi-step Stripe checkout, a thank-you page, customer accounts (upcoming appointments, order history, reschedule and cancel), an about page, and a contact page. It's mobile-first and SEO-ready with metadata, Open Graph, JSON-LD, robots.txt, and a sitemap. ### Can I use it for businesses other than salons? Yes. Haar is themed for a beauty salon, but the booking engine underneath handles any service business — barbershops, spas, tattoo studios, clinics, classes, even rentals. Swap the copy and colors in the config and it becomes a different business. More vertical-specific templates are on the way. ### How do payments work? Checkout uses Stripe Elements. Add your Stripe publishable key as an environment variable and customers can pay by card during booking. You can also configure pay-at-venue (cash) if you'd rather collect in person. ### What is it built with? Next.js 15 (App Router), Tailwind CSS v4, Framer Motion for animation, react-hook-form and Zod for forms, NextAuth v5 for customer auth, Stripe Elements for payments, and the Opencals Storefront SDK for all the booking logic.