Next.js 16 Appointment Booking Template with Admin Dashboard — BookEase
A public booking widget, a 34-screen staff dashboard and an industry-aware landing page — and eighteen businesses in one codebase. Pick a preset below: this page re-skins itself, down to the module the other seventeen never load.
30-day money back guarantee. Email me and you get a full refund — no questions, no forms.
Open the live demo ↗Pick a business. Watch it change shape.
Five of the eighteen presets that ship. Each repaints the page in its designed theme and accent, renames the professional, swaps the services, reorders the landing — and switches on a module the others never load. Everything below is read out of the preset files.
Thirteen more ship in the ZIP: medical, dental, psychology, kinesiology, optometry, veterinary, spa, music, automotive, sports, education, tech support, cleaning.
- settings.businessName
- Ink & Iron Studio
- labels.person
- client
- labels.provider
- artist
- modules
- { tattoo: true }
- INDUSTRY_THEME
- nocturne · #FF4D6D
Book your next piece.
Start with a consultation, then reserve chair time with the artist whose style fits your idea.
Five steps. Design consultation takes nothing online, so the checkout step does not exist — that is the template default (DEFAULT_PAYMENT_POLICY = "none"). Pick a service with a deposit and the sixth step appears.
Every industry gets the same eleven Manage screens. What changes is what the sidebar adds on top — and those screens are not rendered for the others at all. Gating, not a colour scheme.
The industry → sidebar contract is locked by tests/industry-nav.test.ts, the five-versus-six step rule by tests/payment-policy.test.ts. Both ship in the ZIP, both pass.
Nine themes. Light and dark. App-wide.
Each preset paints in the theme it was designed for — until someone picks one explicitly, and then the explicit choice wins. That is the product’s rule, and the rule this page runs: pick a theme here and the industry rail stops repainting it.
Read live from the page you are looking at: values, radii and font stacks all come out of src/styles/themes.css. Copy a block, change the numbers, and you have a tenth theme. Theme and accent are separate switches here exactly as they are in the app, and the overlay runs the template’s own deriveAccentVars() — WCAG check included, which is what decides whether a button label comes out white or near-black.
The rest of the build.
Captures from the running demo, each a different industry in a different theme. Select one to open it full size, keyboard controls and all.
Everything in the ZIP.
No locked tier, no upsell, no hosted service to subscribe to. One purchase, the whole codebase.
| Framework | Next.js 16 · App Router · React 19 |
|---|---|
| Language | TypeScript, strict mode |
| Requirements | Node.js 20+ · npm, pnpm or bun |
| Tests | 327 Vitest specs plus Playwright end-to-end specs |
| Dev server |
npm run dev → localhost:3006, fully populated, no configuration |
| Widget | Service, professional, date & time, details, confirmation — plus a checkout step when the chosen service takes a deposit or full payment |
|---|---|
| Flows | Single service, multi-service cart and recurring series, all priced by the same policy module |
| Manage link | Public link in the reminder: confirm, reschedule or cancel, no account needed |
| Availability | Working hours, breaks, blocked ranges, per-staff overrides, lead time and buffers |
| Admin | 34 screens — week calendar, KPI charts, appointments table with CSV / JSON export, waitlist, deposits, coupons, gift cards, messaging |
| Industries | 18 presets, one file each, with their own services, staff, landing copy, section order and plans |
|---|---|
| Modules | Patient records, teleconsultation, flash portfolio, case files, live classes, rehearsal rooms, loyalty cards, packages & memberships — gated per industry |
| Themes | 9 across light and dark, 5 hero styles, 8 accent presets plus any custom colour, all swappable live in the TweakPanel |
| Languages | English, Spanish, French, Portuguese — the UI and every industry preset |
| Right-to-left | Logical CSS throughout. Add an Arabic or Hebrew locale and the UI mirrors. |
| Out of the box | In-memory mock adapters. Every screen works with zero setup and no keys. |
|---|---|
| Providers | Supabase (data), Stripe (deposits and payments), Resend (email), GA4 and Meta Pixel, plus a Contentful / Sanity / Strapi CMS seam |
| Docs | README, CUSTOMIZATION, DEPLOY, PRODUCTION, PROVIDERS, CMS, plus a guide per CMS |
| Licence | Single use — one purchase, one deployed project. Multi-use available, just ask. |
| Support | hello@violettadev.com |
Before you buy.
Eighteen industries, or one industry painted eighteen ways?
Gated, not recoloured. A clinic loads patient records, prescriptions, consents and a teleconsultation room; a tattoo studio a flash portfolio and a signed consent; a law firm case files and a confidential video room; a gym packs, memberships and a live class. None of those screens render for the other presets — resolveAdminNav() in src/lib/admin/nav.ts decides, and tests/industry-nav.test.ts fails if that drifts.
How many steps does the booking widget have?
Five — service, professional, date and time, details, confirmation. Six only when the chosen service takes a deposit or a full payment, because the checkout step is conditional: bookingStepKeys() returns the shorter list for the template default, which is pay at the venue. The stepper, the “step N of M” labels and the details button all follow from that one function, so the single, multi-service and recurring flows cannot disagree.
Do I need Supabase, Stripe or Resend to run it?
No. It ships on in-memory mock adapters, so npm install then npm run dev gives you a fully populated product on localhost:3006 — every screen, every industry, no keys. Each provider sits behind a documented seam: you swap the mock for the real client without touching the UI, and PROVIDERS.md walks through each one.
What actually lands in my downloads?
The complete source: Next.js 16, React 19, TypeScript strict, Tailwind v4, all 18 presets, the four locales, the tests and the docs. Nothing minified, nothing obfuscated, nothing held back.
I only run one business. Can I strip the other seventeen?
Yes, and CUSTOMIZATION.md is written for it. Delete the preset files you do not need, keep your row in INDUSTRY_THEME (or drop the file and set a fixed defaultTheme), and remove the module routes the others used. Every premium feature here ships with its own removal steps — TweakPanel, components showcase and docs page included.
Are the four languages real, or machine output?
Real. English, Spanish, French and Portuguese cover the UI and every industry preset — services, staff bios, landing copy, FAQ. A coverage test fails if a key exists in one locale and not the others, so a half-translated release cannot ship.
Can I use it for a client?
Yes — the licence covers one deployed project per purchase, so a client site counts. Building several? Email hello@violettadev.com and I will sort out multi-use.
Who makes this, and what happens if it breaks?
Violetta Studio — a one-person shop building production Next.js templates. I wrote every line and I answer my own support: hello@violettadev.com. The rest of the catalogue is at violettadev.com ↗.
One codebase. Whichever business walks in.
You just reconfigured it five times without opening an editor. The rest is your business name.
Buy Next.js 16 Appointment Booking Template with Admin Dashboard — BookEase — $9930-day money back guarantee. Email me and you get a full refund — no questions, no forms.