# Frisor: a free open-source barbershop booking template for Next.js

> Frisor is a free, open-source barbershop website template built on Next.js 15 and the Opencals Storefront SDK. Real booking flow, Stripe checkout, MIT licensed — deploy your own in three steps.

URL: https://opencals.com/blog/templates/frisor
Author: Stanislav Tyshchenko
Published: 2026-06-16
Updated: 2026-09-05
Categories: engineering, announcement

If you run a barbershop, your options for a booking website usually come down to two bad choices. Either you take a generic SaaS booking page that looks like every other booking page on the internet, or you pay an agency a few thousand euros to build something custom and then pay them again every time you want to change a price.

**Frisor** is a third option. It's a free, open-source barbershop website — a complete, working booking site you can deploy yourself, rebrand, and own. The code is MIT licensed and lives on GitHub. The booking backend is handled by Opencals, so you're not running servers or wiring up availability logic. You get a real barbershop site; you don't get a maintenance project.

![Frisor homepage hero — the "THE MODERN Barber" editorial screenshot](https://app.opencals.com/_next/image?url=https%3A%2F%2Fopencals-blog-media.s3.eu-west-2.amazonaws.com%2Fseo-content%2Finline%2F1781645804943-homepage-hero.png\&w=3840\&q=75)

## Who Frisor is for

Frisor is for barbers and barbershop owners who want a website that looks like their shop, not like a scheduling app. It's also for developers and agencies who build sites for barbershops and want a strong starting point instead of a blank Next.js project.

The fictional shop the template is built around is a Berlin barbershop at Torstraße 145 — dark, editorial, the kind of place that cares about its branding. The design reflects that: a deep green background (`#0F1B17`) with green surface panels (`#1E2E29`), a gold accent (`#E8B547`), warm cream text (`#EFE9DA`), the Fraunces display font for headings, and Inter for body copy. It's a specific look on purpose. If you don't like it, every colour and font is a CSS variable you can change in one file.

## The "open-source showcase" idea

Frisor isn't a one-off. It's the second in a series of open-source templates that show what you can build on Opencals when you go [headless](https://opencals.com/blog/headless-booking-system) — that is, when you take the booking engine through an API and build your own frontend on top of it.

The first template is [HAAR](https://template-haar.vercel.app), a hair-salon site with a lighter, warmer palette. Frisor is the barbershop counterpart: same Opencals Storefront SDK underneath, completely different design. Both are real, deployable booking sites — not toy demos. The booking backend handles the hard parts (availability, payments, customer accounts), and the frontend is entirely yours to design.

If you want the wider context on where these templates fit, the [open-source booking systems guide](https://opencals.com/blog/open-source-booking-system) breaks down the difference between self-hosted platforms, MIT-licensed templates like Frisor, and SDKs.

> **Key takeaway**
>
> Frisor is a frontend you own (MIT licensed Next.js) plus a backend you don't have to run (Opencals Storefront API). You customise the site freely; Opencals handles availability, payments, and data.

## The booking flow

The booking page is the part that matters most, and it's where Frisor spends its design budget. Instead of a multi-page wizard, it's a single-page card-stack flow modelled on native mobile apps: **service → location → barber → date → time → confirm**. Each step is a card; the summary stays visible. On mobile there's a sticky bottom CTA; on desktop, a sticky summary rail.

![Booking flow — use the 4-iPhone vanity shot](https://app.opencals.com/_next/image?url=https%3A%2F%2Fopencals-blog-media.s3.eu-west-2.amazonaws.com%2Fseo-content%2Finline%2F1781645932964-frisor-banner-min.png\&w=3840\&q=75)

The services in the seed dataset are a real barbershop menu, not lorem-ipsum:

- **Classic Cut** — with variants for Skin Fade and Scissor Cut
- **Beard Trim** — including Trim & Shape
- **Hot Towel Shave**
- **Cut + Beard**
- **Kids Cut**
  And a set of add-ons that attach to a booking: **Hot Towel Finish**, **Beard Oil Treatment**, **Eyebrow Trim**, and **Hair Tonic & Pomade Style**. Each service can carry variants with their own price, duration, and assigned barber, which is exactly how a real shop prices a skin fade differently from a scissor cut.

Multi-location is built in — a global location selector, staff filtered by the location you pick, and per-location availability. The checkout runs on Stripe Elements, collects customer details and any custom questions, and logs the customer in afterward so they land in their account with the new appointment already there. From there they can view, reschedule, or cancel without calling the shop.

## The tech stack

Frisor is a current-generation Next.js project, kept deliberately conventional so it's easy to read and extend:

- **Next.js 15** (App Router)
- **Tailwind CSS v4** for styling
- **Opencals Storefront SDK** for all booking data
- **Framer Motion** for the card transitions
- **react-hook-form + Zod** for forms and validation
- **Stripe Elements** for payment
- **NextAuth.js v5** for customer accounts
- **moment-timezone** for timezone-correct slots
  It's MIT licensed end to end. Every Opencals API call is right there in the source, which makes Frisor a useful reference implementation even if you don't ship it as-is — it's a working example of how to build a booking frontend on the [Storefront SDK](https://opencals.com/developers).

## Deploy your own in three steps

You don't need to clone anything locally to get a live site. The whole thing runs from a Vercel one-click deploy.

1. **Create a Dev Store and seed it**: Sign up at app.opencals.com, create a Dev Store, and seed it with the Barbershop / Frisor preset. That gives your store the barber services, staff, and locations the template expects to render.
2. **Generate a Storefront API key**: In your Opencals account settings, generate a Storefront API key. It starts with sfk\_ and is scoped to that one store.
3. **Deploy to Vercel**: Use the one-click deploy button in the Frisor repo, paste your sfk\_ key and a random AUTH\_SECRET when Vercel asks for environment variables, and your barbershop site is live.

[Deploy to Vercel](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fletsopencals%2Ftemplate-frisor\&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%2Ffrisor-barbershop-template%2FREADME.md%23environment-variables\&project-name=frisor-barbershop\&repository-name=frisor-barbershop)

Add your Stripe publishable key when you're ready to take real payments, edit `lib/site-config.ts` to swap in your shop name, address, hours, and team, and adjust the colours in `app/globals.css` if you want a different palette. That's the full path from nothing to a working barbershop booking site.

- [Frisor on GitHub](https://github.com/letsopencals/template-frisor): The full source, MIT licensed. Clone it, fork it, or one-click deploy.
- [Frisor live demo](https://template-frisor-sage.vercel.app): The barbershop template running end to end — book a slot and see the flow.
- [Open-source booking systems](https://opencals.com/blog/open-source-booking-system): Where Frisor fits among self-hosted platforms, templates, and SDKs.
- [Opencals for developers](https://opencals.com/developers): The Storefront API, SDK, and templates for building custom booking sites.

## Take it and make it yours

Frisor is a starting point, not a finished product you're stuck with. Clone it, rebrand it for your shop, or fork it into your own design system for client work. The barbershop menu, the Berlin address, the green-and-gold look — all of it is config and CSS you control. The booking engine underneath stays managed, so the only thing you're maintaining is the part you actually care about: how your shop looks and feels online.

Grab it from [GitHub](https://github.com/letsopencals/template-frisor), try the [live demo](https://template-frisor-sage.vercel.app), and if a salon fits your case better than a barbershop, [HAAR](https://template-haar.vercel.app) is the same idea in a different palette.

## Frequently asked questions

### Is Frisor really free?

Yes. The Frisor template code is MIT licensed and free to use, fork, rebrand, and ship for client work. There's no per-site license fee on the template. It connects to Opencals for the booking backend — the API has a free tier to get started, and paid plans kick in as you take real bookings.

### Do I need to be a developer to use the Frisor template?

To deploy and customise it, yes — Frisor is a Next.js codebase, not a no-code site builder. If you're comfortable editing a config file and deploying to Vercel, you can run it. If you're a barber who wants a booking page without touching code, the standalone Opencals booking page is the faster route. Frisor is for people who want to own the frontend.

### What's the difference between Frisor and the HAAR template?

Both are open-source Next.js booking templates built on the same Opencals Storefront SDK. HAAR is a hair-salon template with a light, warm palette. Frisor is a barbershop template with a dark editorial look — deep green and gold — and a single-page card-stack booking flow. Same backend, different design and vertical. Use whichever fits your shop, or fork either as a starting point.

### Can I use Frisor for a real barbershop and take real payments?

Yes. Frisor is a full booking site, not a demo. It handles services and variants, multi-location, staff selection, real-time availability, Stripe checkout, and customer accounts. Connect your own Opencals store, add your Stripe keys, and it takes live bookings and payments.

### Where do the services and availability come from?

From your Opencals store. The template reads everything — services, barbers, locations, time slots, pricing — through the Storefront API. You manage your catalog and schedule in the Opencals dashboard; Frisor renders it. Nothing about the menu is hardcoded in the frontend.