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, with a calm “Warm Practice” design: cream, honey oak, dusty steel-blue, brass and sage, set in Fraunces and Figtree. Patients start from what’s going on rather than a department name, and every screen (Care Finder, departments, clinicians, video visits, the booking composer, checkout, the visit pass and the My Care portal) 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 Care Finder recommending a visit with next free times and the emergency notice — The Care Finder — a recommended visit with its next free times

Clear Care template booking composer with a day ribbon, time slots showing free clinicians and a live appointment card — The booking composer — day ribbon, slots and the live appointment card

Clear Care template pre-visit notes with reason for visit, insurance provider and photo upload — Pre-visit notes on lined paper, with photo upload

Clear Care template My Care portal with the next visit, a prep checklist and the care team — My Care — the next visit, prep checklist and care team

What’s inside

Feature	Notes
Care Finder	`/care` asks who the visit is for, what’s going on and in clinic or by video, then recommends visits with the next free times. Needs and keywords live in `lib/site-config.ts`. Not a diagnosis tool; the emergency notice is on every booking surface
Rooms of care	Product Collections endpoints — General Medicine, Cardiology, Dermatology, Pediatrics, Physiotherapy, Dental, Nutrition, Mental Health, Labs & Vaccinations, each with what it treats, its visits, clinicians and FAQs
Clinicians	Staff Members endpoints — a directory and a profile per clinician with their bookable visits
Video visits	The store’s online location — chosen per visit in the booking flow, with a local camera/mic check on `/video-visits`
Booking composer	One page: who the visit is for (Me / My child / Someone else), clinic or video, clinician or “first available”, day and slots, add-ons, then pre-visit notes. A live appointment card is stamped “Held for you” on Reserve
Pre-visit notes	Checkout questions mapped by `internalName` in `lib/intake.ts`, answered per visit (so a family cart keeps each patient’s notes), with patient name/DOB when it’s not for you and real photo uploads via presigned URLs
Multi-location	Locations endpoints — three clinics out of the box, clinicians filtered by clinic
Checkout	Cart + Checkout + Payment endpoints — two steps (contact, then payment), themed Stripe Elements or pay at the clinic, promo codes, a cart hold with Extend
Visit pass	What to bring, add to calendar, and video join details on the thank-you page
My Care	Self-Service endpoints — next visit with a prep checklist and join-video window, recalls due, care team, family filter, visit timeline and records with notes, photos and invoices, rate your care, reschedule/cancel within the store’s policy, billing and communication preferences
Passwordless sign-in	6-digit email code first, password second, one-time email links via `/link/[token]`
Stack	Next.js 15, TypeScript, Tailwind v4, framer-motion, Lenis, `@opencals/storefront-sdk` ^0.3.17

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, clinicians and pre-visit questions — then grab a private storefront key (spk_, see API keys) and set it in .env.local. Stores seeded before the “Visit for” and patient questions were added still work, but book every visit for “Myself” until you reseed.

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. Clinic copy and knowledge (Care Finder needs, department content, prep lists, recalls, clinician bios) live in lib/site-config.ts, intake mapping in lib/intake.ts, and every colour and font is a Tailwind v4 @theme token, with the full design contract in DESIGN.md. 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