Dentist Website Template
Demo brand: Northlight Dental Co. · Dental practice · 24 routes · Astro 7 + Tailwind 4
Live preview
The demo is a full desktop site. Open it in a new tab ↗
About this dentist website template
A complete website for a private dental practice: a “next free appointments” card in the hero, eight treatment pages with published prices, an online appointment picker, a membership plan with a cost estimator, new-patient and team pages, a journal, an FAQ and a contact form. Twenty-four built pages, all driven by content files.
It looks bright and calm. White pages with pale aqua blocks, dark ink type, real photography of daylit treatment rooms, gloved hands and instruments, and one cerulean accent for buttons and prices. Gabarito for headings, Mulish for everything else.
Every section answers what a patient wants to know before booking: what does it cost, how soon can I be seen, who will I see, and what if I am nervous. The appointment picker and the plan-versus-pay-as-you-go estimator answer it on the page. Motion is one quiet reveal.
The 24 pages you get
- Home
/ - Hero with the next three free slots, promises, all treatments with prices, the practice story, how a first visit goes, the appointment picker, a year-of-care cost table, reviews with a treatment filter, journal, FAQ with a nervous-patient card, and a booking band.
- Treatments and prices
/treatments/ - Treatments grouped by category, then the full price list, line by line.
- Treatment pages
/treatments/…/ - Eight treatments. Price from, time in the chair, number of visits, who you will see, what is included, named steps, a price table, questions and a book button that pre-selects the right appointment.
- Membership plan
/membership/ - What the monthly plan includes, an estimator comparing a year on the plan with pay-as-you-go, the year-of-care table and plan questions.
- New patients
/new-patients/ - What happens at a first visit, what to bring, what the first year usually costs, and help for nervous patients.
- Our team
/team/ - Dentists and hygienists with initials instead of photos, what to ask each one about, the practice team and how the practice works.
- Journal
/journal/ - A lead article and list rows with treatment tag and read time. Add a Markdown file and it appears here.
- Articles
/journal/…/ - Four written articles on returning after a long gap, whitening, emergencies and clear aligners.
- Book online
/book/ - The appointment picker on its own page, with an emergency note and practical details.
- FAQ
/faq/ - Visits, prices, payment, cancellation, children, parking and treatment questions, with the nervous-patient card alongside.
- Contact
/contact/ - Request form that fills in the chosen appointment, clinician, day and time from the picker, plus phone, emergency line, address and parking.
- Privacy and terms
/legal/…/ - Two starter legal pages on a shared layout: privacy notice and terms of treatment.
- 404
/404 - Designed, with a way back and the practice phone number.
What is in the build
- An appointment picker: treatment, then clinician, then day, then a free time, with a summary card that sends the request to the contact form
- A hero card showing the next three free appointments, each linking straight into the picker
- A membership estimator that compares a year on the plan with pay-as-you-go, and says so when pay-as-you-go is cheaper
- Treatments as content: prices, inclusions, steps and questions in one Markdown file per treatment
- Clinicians, working days, appointment types and diary times in one data file
- Reviews tagged by treatment with a chip filter, and an opening-hours footer with an emergency line
- Nineteen real clinic photographs, no patient faces, optimised to WebP by Astro
- All practice details in one file, and one accent colour that rebrands the whole site
- Vitest and Playwright suites included
The design decision
Every template in this catalog is loud in exactly one channel and deliberately quiet in the other three. That single rule is what stops 65 different worlds reading as one design system in different paint.
- The world
- White ground with pale aqua blocks, Gabarito headings over Mulish text, daylit clinic photography of treatment rooms and gloved hands, and one cerulean accent.
- The mechanic
- Patients pick a treatment, clinician, day and free time and send the request to a pre-filled contact form; a hero card shows the next free slots, and a membership estimator compares a year on the plan with pay-as-you-go. Motion is one quiet reveal.
- Loud channel
- Imagery
- Imagery. Daylit treatment rooms, gloved hands, instruments
- Type & palette
- Gabarito · Mulish
-
#ffffff#0e2430#0b6fa4
Who it is for
Built for private dental practices and a good fit for orthodontists, hygiene clinics, physiotherapists, opticians or any appointment-led clinic with a small team. It suits a practice that publishes its prices, takes new patients and wants people to pick a time online.
Under the hood
- Astro 7 · static output, zero client framework
- Tailwind 4 · one @theme block holds the palette
- MDX content collections for the blog
- GSAP + Lenis for the scroll work, reduced-motion aware
- Self-hosted woff2 — no Google Fonts request
- Sitemap, canonicals and per-route meta wired
- Vitest + Playwright suites in the repository
- Zero third-party requests · strict CSP-ready
How to get started
- 01 Accept the repository invite and clone it.
- 02 Run
npm install, thennpm run dev. - 03 Replace the content in
src/data/with your own — that is where the brand, the copy and every list live. - 04 Swap the images in
public/images/and the palette in the@themeblock. - 05 Run
npm run buildand deploydist/anywhere static.
Questions
Does the picker take real bookings?
It sends the chosen appointment, clinician, day and time to the contact form, which you point at your form backend or practice software. Free and taken slots are simulated from the diary times in one data file; the README shows where to plug in real availability.
How do I change the treatments and prices?
Edit the Markdown file for each treatment. Its price, inclusions, steps and questions update the treatment page, the price list, the home grid and the footer. The plan price and estimator prices sit in one data file each.
Can I use the photographs?
Yes. They are from Pexels, which allows commercial use, and each one is listed with its source in LICENSING.md. There are no identifiable faces, and equipment and product brand names were cropped or removed.
What exactly do I get for $49?
Access to a private GitHub repository holding the complete Astro source of this template — every route you see in the preview, the content model, the images and the tests. Updates arrive in that same repository.
How many sites can I build with one licence?
As many as you like, for yourself or for clients. The licence is per buyer, not per project. The one thing you may not do is resell or redistribute the source as a template, theme or starter kit.
Do I need to know Astro?
It helps, but the common case is editing content and colour. Content lives in typed objects under src/data, colour lives in one @theme block, and npm run dev shows the result. Deploying is a static folder — Cloudflare Pages, Netlify and Vercel all take it as-is.
Is anything loaded from a third party?
No. Fonts are self-hosted woff2, there is no analytics, no tag manager, no CDN script and no external CSS. The build ships static HTML under a strict Content-Security-Policy.
More health & fitness templates
IRONCLAD
Boxing & strength gym
Loud
Display type
Hale
Hot yoga studio
Loud
Imagery
Terra & Still
Wellness coaching
Loud
Palette
Havenoak Therapy
Counselling & psychotherapy
Loud
Imagery
APLOMB
Chiropractic & spine clinic
Loud
Imagery