> ## Documentation Index
> Fetch the complete documentation index at: https://opencals.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Alba Dental — dental group template

> Free, open-source dental practice website template. Next.js 15, five London studios plus video consultations, 26 clinicians, a Smile Check questionnaire on a 32-tooth chart, a chair-time booking planner with the hygienist straight after, a flippable appointment card, a recall ring in the patient account, and Alba Kids, a cut-paper children's site, built on the Opencals Storefront API.

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](https://opencals.com/docs/api-reference/introduction.md) and typed
[TypeScript SDK](https://opencals.com/docs/guides/storefront-sdk.md) as [Haar](https://opencals.com/docs/open-source/haar.md),
[Frisor](https://opencals.com/docs/open-source/frisor.md), [Clear Care](https://opencals.com/docs/open-source/clarity.md),
[VOLT](https://opencals.com/docs/open-source/volt.md), [NOIR Drive](https://opencals.com/docs/open-source/noir.md),
[Fluently](https://opencals.com/docs/open-source/fluently.md), [Bali Villa Rentals](https://opencals.com/docs/open-source/bali-villas.md)
and [Tensile](https://opencals.com/docs/open-source/reformer.md).

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.

> [card] [Live demo](https://template-alba.vercel.app)
>
> template-alba.vercel.app

> [card] [Source code](https://github.com/letsopencals/template-alba)
>
> letsopencals/template-alba (MIT)

> [card] [Deploy to Vercel](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fletsopencals%2Ftemplate-alba\&env=OPENCALS_API_KEY,AUTH_SECRET\&envDescription=API%20key%20from%20your%20Opencals%20dashboard%20and%20a%20random%20secret%20for%20auth\&project-name=alba-dental\&repository-name=template-alba)
>
> One-click deploy

> [card] [Build it with AI](https://opencals.com/docs/ai-agents/build-booking-site-skill.md)
>
> 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](https://raw.githubusercontent.com/letsopencals/template-alba/main/docs/cover.png)

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](https://raw.githubusercontent.com/letsopencals/template-alba/main/docs/today-board.png)

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.

![Alba Dental template Smile Check with three front teeth selected, a concern and a comfort dial](https://raw.githubusercontent.com/letsopencals/template-alba/main/docs/smile-check.png)

Smile Check — the tooth chart, the chart note and the comfort dial

## 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](https://raw.githubusercontent.com/letsopencals/template-alba/main/docs/chair-planner.png)

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](https://raw.githubusercontent.com/letsopencals/template-alba/main/docs/thank-you.png)

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 children's dental page drawn as a cut-paper picture book with a tooth character in a cape](https://raw.githubusercontent.com/letsopencals/template-alba/main/docs/kids-cover.png)

Alba Kids — Pip and the Tooth Town adventure

![Alba Kids board-game road with paper buildings for each children's dental service](https://raw.githubusercontent.com/letsopencals/template-alba/main/docs/kids-road.png)

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](https://raw.githubusercontent.com/letsopencals/template-alba/main/docs/account.png)

My Smile — the recall ring, the next appointment card, history and the kids stamp passport

![Alba Dental template on four phone screens](https://raw.githubusercontent.com/letsopencals/template-alba/main/docs/mobile.png)

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

**1. Clone and install**

```bash theme={"theme":{"light":"github-light","dark":"github-dark-default"}}
git clone https://github.com/letsopencals/template-alba.git
cd template-alba
npm install
```

**2. Add your API key**

Create a Dev Store in the [Opencals dashboard](https://opencals.com) 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](https://opencals.com/docs/authentication.md#api-keys)) and set `OPENCALS_API_KEY` and
`AUTH_SECRET` in `.env.local`.

**3. Run it**

```bash theme={"theme":{"light":"github-light","dark":"github-dark-default"}}
npm run dev
```

Your studios, clinicians and treatments render immediately.

**4. Deploy**

Push to your own repo and
[deploy to Vercel](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fletsopencals%2Ftemplate-alba\&env=OPENCALS_API_KEY,AUTH_SECRET\&envDescription=API%20key%20from%20your%20Opencals%20dashboard%20and%20a%20random%20secret%20for%20auth\&project-name=alba-dental\&repository-name=template-alba),
or host anywhere Next.js runs.

> [!NOTE]
>
> 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.

> [!NOTE]
>
> 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`:

```css theme={"theme":{"light":"github-light","dark":"github-dark-default"}}
@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 */
}
```


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.