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

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.

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 — 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, 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. They exist to make a point: 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 breaks down the difference between self-hosted platforms, MIT-licensed templates like Frisor, and SDKs.

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.

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.

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.

Deploy with Vercel

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.

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, try the live demo, and if a salon fits your case better than a barbershop, HAAR is the same idea in a different palette.