Alba Dental — dental group template - Opencals Developer Docs

A complete dental group website you can clone and deploy today. Alba Dental is built for multi-location clinics with many clinicians: five studios, each with its own hours and team, dentists, hygienists and specialists booked by name or “first available”, and a children’s site of its own. Start here for a dental practice, an orthodontist, a physio or any clinic group. It runs on the same Storefront API and typed TypeScript SDK as Haar, Frisor, Clear Care, VOLT, NOIR Drive, Fluently, Bali Villa Rentals and Tensile. It’s set in London (GBP, Europe/London) with studios in Marylebone, Shoreditch, Notting Hill, Canary Wharf and Clapham, video consultations, and 26 clinicians. The design is light and precise: porcelain and enamel, deep lagoon teal, mint light and brass hairlines, with dental-chart annotations throughout.

Live demo

template-alba.vercel.app

Source code

letsopencals/template-alba (MIT)

Deploy to Vercel

One-click deploy

Build it with AI

build-booking-site skill

Alba Dental website template on a laptop and the Alba Kids picture book on a phone, on a limestone desk in a dental studio — Alba Dental — the site on desktop, Alba Kids on mobile

Alba Dental template live board listing five London studios with their status and next free times — Today at Alba — every studio's status and next free check-up and hygiene time

Smile Check

A short questionnaire on a real 32-tooth chart (FDI numbering). Patients tap the teeth on their mind, say what’s going on and set a comfort dial from calm to anxious. Alba suggests the visit and the studio with the soonest time, then opens the booking with everything filled in. The comfort level reaches the dentist as a pre-visit answer.

The chair planner

One screen. The visit is drawn to scale on a chair-time track: each treatment is a block as long as its minutes, add-ons hang off it, and after a check-up the hygienist straight after snaps on as a second block (a second appointment in the cart, same chair). The studio is picked on the Alba Line with each station’s next free time, the clinician from portrait strips or “First available”, then a day and a time. The track is the summary.

Alba Dental template booking page with a check-up block and a hygiene block on a minute ruler — The chair planner — a check-up and the hygienist straight after on the chair-time track

Alba Dental template confirmation shown as a dental appointment card, with a six-month recall planner below — The appointment card — date, time, clinician and patient, with what to bring on the back

Alba Kids

A separate children’s site at /kids with its own type, colours and navigation: a picture book in cut paper and risograph inks, drawn in SVG and CSS. Every children’s service from the store is a stop on a board-game road through Tooth Town. There’s a two-minute brushing game (Sugar Bug Scrub), the kids team as a scrapbook, a questionnaire for parents written as a story (Tooth Quest), and a printable certificate of bravery after a child’s visit.

Alba Kids board-game road with paper buildings for each children's dental service — The road through Tooth Town — every kids service as a stop, with price, length and ages

The clinic model

This is the part worth copying even if you never ship Alba itself. It uses existing Opencals features only.

Piece	How it’s modelled
A studio	A location with its own opening hours; video consultations are an `ONLINE` location
A department (hygiene, cosmetic, children’s dentistry)	A collection, mapped to its presentation in `lib/site-config.ts`
A treatment and its options	A product group with variants (hygiene clean / deep clean / AirFlow; kids check-up by age band)
Who can do it, and where	Staff on the product; a treatment is offered at the studios where its clinicians work, so children’s services only appear where there’s a kids room
First available	Every clinician’s free windows for the whole booking window, read once per studio and treatment and cached for 60 s; the board, day strip and times are derived from it
The hygienist straight after	A second appointment in the cart, starting when the first ends
Happy air, fluoride varnish, AirFlow polish, X-rays	Add-ons
Who the visit is for, comfort level, a child’s nickname	Checkout questions matched by `internalName`, answered per visit, so a family cart keeps each patient apart
`NEWSMILE`, early-bird hygiene	A code for 20% off a new patient exam, and an automatic 15% off hygiene visits starting before 9:00 on weekdays
Change or cancel	Customer reschedule and cancel up to 24 hours before

What’s inside

Alba Dental template account page with a recall ring, an appointment card, a visit history and a children's stamp passport — My Smile — the recall ring, the next appointment card, history and the kids stamp passport

Alba Dental template on four phone screens — Mobile — home, the chair planner, the appointment card and Alba Kids

Feature	Notes
Home	Porcelain tooth hero, the live studio board, a numbered treatment price index, Smile Check, the Alba Line of studios, the team, patient notes, Alba Kids and FAQ
Smile Check	Tooth chart, concerns, comfort dial, a suggested visit and the soonest studio
Chair planner	Treatment, studio, clinician or first available, day and time, extras, the patient; the hygienist straight after as a second block
Treatments, studios, dentists	A price list in writing, studio pages with hours and the next free chair, 26 clinicians filtered by studio, speciality and language
Checkout	A single patient record: details, Stripe or pay at the studio, a promo code
Confirmation	A flippable appointment card, add to calendar, and a six-month recall reminder
Accounts	Passwordless 6-digit code or magic link; recall ring, history, family switch, reschedule and cancel up to 24 hours before
Alba Kids	Tooth Town picture book, Sugar Bug Scrub, Tooth Quest, certificate of bravery, stamp passport
Motion	Light sweeps, aperture openings, split-flap times and View Transitions; every effect respects reduced motion
SEO	Per-page metadata, Open Graph, `Dentist` structured data, `robots.txt`, `sitemap.xml`
Stack	Next.js 15, TypeScript, Tailwind v4, `@opencals/storefront-sdk` v0.3.19

Get started

Clone and install

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

Add your API key

Create a Dev Store in the Opencals dashboard with the country set to the United Kingdom (for GBP) and choose the Alba Dental dataset (dental_clinic). It seeds the five studios and video, 26 clinicians, 25 treatments, add-ons, the pre-visit questions, the two discounts and sample bookings. Then grab a private storefront key (spk_, see API keys) and set OPENCALS_API_KEY and AUTH_SECRET in .env.local.

Run it

npm run dev

Your studios, clinicians and treatments render immediately.

Deploy

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

Pages are server-rendered, so their API calls carry no browser Origin. Leave allowed origins empty on the key you give this template, or those calls are rejected.

Set Storefront Base URL in your dashboard (Settings → API) to your deployed domain. Every customer link (view, reschedule, cancel, leave feedback) is built as {storefrontBaseUrl}/link/{token}.

Make it yours

MIT-licensed: rebrand it, restructure it, or use it for client work. Clinic knowledge lives in lib/site-config.ts (studio copy and photography, the department mapping, clinician profiles, Smile Check concerns, comfort levels, recall intervals) and lib/kids/kids-config.ts for Alba Kids. Every colour and font is a Tailwind v4 @theme token in app/globals.css:

@theme {
  --color-porcelain: #f3f1eb;  /* page */
  --color-ink: #0d1d1f;        /* text */
  --color-lagoon: #0d3b3e;     /* the one action colour */
  --color-mint: #bfeedd;       /* light, availability */
  --color-brass: #a9844a;      /* hairlines, stamps */
}

Live demo

Source code

Deploy to Vercel

Build it with AI

​Smile Check

​The chair planner

​Alba Kids

​The clinic model

​What’s inside

​Get started

​Make it yours

Smile Check

The chair planner

Alba Kids

The clinic model

What’s inside

Get started

Make it yours