Clear Care — clinic booking template - Opencals Developer Docs

A complete medical clinic booking website you can clone and deploy today. Clear Care is the clinic counterpart to Haar and Frisor: the same Storefront API and typed TypeScript SDK underneath, a clinical vertical with a glass-morphism design. Every screen — departments, service picker, clinician and location selectors, time slots, medical intake, checkout, customer account — is built with the public API.

Live demo

template-clarity.vercel.app

Source code

letsopencals/template-clarity (MIT)

Deploy to Vercel

One-click deploy

Clear Care medical clinic booking website template — storefront and booking flow — Clear Care — the storefront and booking flow, on desktop and mobile

Clear Care template — browse clinic departments by specialty — Department-first browsing — care by specialty

Clear Care template card-stack booking flow with clinician, date and live availability — The booking page — location, clinician, date, and live time slots

What’s inside

Feature	Notes
Department-first browsing	Product Collections endpoints — General Medicine, Cardiology, Dermatology, Pediatrics, Physiotherapy, Dental, Nutrition, Mental Health, Labs & Vaccinations
Service catalog	Driven by the Products endpoints
Clinician & multi-location booking	Staff Members + Locations endpoints — three clinics out of the box, clinicians filtered by location
Real-time availability	Appointments endpoints — group sessions show live “N left” capacity
Medical intake at checkout	Custom checkout questions — reason for visit, insurance provider, new-patient flag, saved to the appointment
Cart & Stripe checkout	Cart + Checkout + Payment endpoints, deposits supported
Passwordless customer accounts	Self-Service endpoints — 6-digit email login (password fallback), bookings, reschedules, cancellations, one-time email links via `/link/[token]`
Stack	Next.js 15, TypeScript, Tailwind v4, `@opencals/storefront-sdk`

Get started

Clone and install

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

Add your API key

Create a store in the Opencals dashboard — choose the Medical / Clear Care Medical dataset preset to seed the clinic’s departments, services, and clinicians — then grab a Storefront API key (see Authentication) and set it in .env.local.

Run it

npm run dev

Your clinic’s real departments, clinicians, and availability render immediately.

Deploy

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

Make it yours

MIT-licensed: rebrand it, restructure it, or use it as a starting point for client work. All clinic-specific copy lives in lib/site-config.ts, and every colour and font is a Tailwind v4 @theme token, so components keep working when you change values. Agencies can run one codebase against multiple stores — each deployment points at a different API key. To go deeper than theming, follow the booking page tutorial to see the API calls behind each screen.

Live demo

Source code

Deploy to Vercel

​What’s inside

​Get started

​Make it yours

What’s inside

Get started

Make it yours