Skip to main content
Clever Ops

Medical Clinic Site Template

Complete GP clinic site as a calm appointment card, reason-picker booking hero, hours and telehealth, honest Medicare fees, first-visit checklist, team, gentle FAQ and booking.

Preview & code

Loading Medical Clinic Site Template preview

Installation

pnpm dlx shadcn@latest add @cleverui/template-medical-clinic

Requires the @cleverui registry in your components.json, a one-off, two-line setup.

Usage

tsx
import { TemplateMedicalClinic } from '@/components/blocks/template-medical-clinic'
Exampletsx
'use client'

import { TemplateMedicalClinic } from '@/components/blocks/template-medical-clinic'

export default function TemplateMedicalClinicDemo() {
  return <TemplateMedicalClinic />
}

API reference

TemplateMedicalClinic accepts the following props.

PropTypeDefaultDescription
contentClinicContentdefaultContentoverride any slice of the page, defaults to the Wattle Creek fixture above
classNamestring

Referenced types

Typestsx
export interface ClinicContent {
  brand: { name: string; short: string }
  nav: {
    links: ClinicLink[]
    phone: { display: string; href: string }
    cta: ClinicLink
  }
  /** the appointment card: reassurance on the left, the reason picker on the right */
  hero: {
    eyebrow: string
    title: string
    description: string
    availability: { title: string; detail: string }
    callLabel: string
    feesLink: ClinicLink
    panel: {
      title: string
      reasonLabel: string
      reasons: ClinicReason[]
      defaultNote: string
      defaultCta: string
      /** precedes the visit length, e.g. "Plan for about" */
      lengthHint: string
      finePrint: string
    }
  }
  /** the quiet strip under the hero, the four things patients ask first */
  reassurance: { label: string; items: string[] }
  /** 01, care as calm cards */
  care: {
    eyebrow: string
    title: string
    lede: string
    items: ClinicService[]
    footnote: string
  }
  /** 02, hours, appointment types and telehealth */
  visiting: {
    eyebrow: string
    title: string
    lede: string
    hoursTitle: string
    hours: ClinicHoursRow[]
    walkIn: string
    afterHours: { note: string; phone: { display: string; href: string } }
    types: ClinicAppointmentType[]
    telehealth: string
    footnote: string
  }
  /** 03, disclosure-grade fees, bulk billing stated first */
  fees: {
    eyebrow: string
    title: string
    lede: string
    bulkBilling: { title: string; detail: string }
    columns: { service: string; length: string; fee: string; rebate: string; gap: string }
    bulkBilledLabel: string
    rows: ClinicFeeRow[]
    concessions: string
    finePrint: string[]
    footnote: string
  }
  /** 04, the interactive what-to-bring checklist */
  firstVisit: {
    eyebrow: string
    title: string
    lede: string
    points: string[]
    checklistLabel: string
    /** follows the count, e.g. "3 of 5 ready" */
    readyWord: string
    allReady: string
    items: ClinicChecklistItem[]
    arriveNote: string
    ctaLabel: string
  }
  /** 05, GPs and allied health, special interests */
  team: {
    eyebrow: string
    title: string
    lede: string
    daysLabel: string
    interestsLabel: string
    members: ClinicTeamMember[]
    footnote: string
  }
  /** 06, the gentle FAQ */
  questions: {
    eyebrow: string
    title: string
    lede: string
    items: ClinicFaqItem[]
    fallback: { note: string; phone: { display: string; href: string } }
  }
  /** the closer: request a booking, phone for urgent, 000 for emergencies */
  booking: {
    eyebrow: string
    title: string
    description: string
    urgent: {
      label: string
      phone: { display: string; href: string }
      note: string
    }
    emergency: string
    address: string
    form: {
      title: string
      nameLabel: string
      namePlaceholder: string
      phoneLabel: string
      phonePlaceholder: string
      reasonLabel: string
      noteLabel: string
      notePlaceholder: string
      buttonLabel: string
      againLabel: string
    }
    confirmationTitle: string
    confirmation: string
  }
  footer: {
    tagline: string
    emergency: { strong: string; rest: string }
    columns: { label: string; links: ClinicLink[] }[]
    contact: { label: string; value: string; href: string }[]
    registration: string
    accreditation: string
    afterHours: string
    legal: ClinicLink[]
    meta: string[]
  }
  /** fixed call and book bar on small screens */
  actionBar: { callLabel: string; bookLabel: string }
}

export interface ClinicLink {
  label: string
  href: string
}

export interface ClinicReason {
  /** stable id shared by the hero chips and the booking form, e.g. "skin" */
  id: string
  /** chip label, e.g. "Skin check" */
  label: string
  /** the note the booking panel shows once this reason is picked */
  note: string
  /** tailored CTA label, e.g. "Book a skin check" */
  ctaLabel: string
  /** how long the visit usually takes, shown as a quiet hint */
  length: string
}

export interface ClinicService {
  name: string
  description: string
  includes: string[]
}

export interface ClinicHoursRow {
  days: string
  times: string
}

export interface ClinicAppointmentType {
  name: string
  length: string
  fee: string
  /** plain sentence about the Medicare rebate for this visit */
  rebateNote: string
  bestFor: string
  note?: string
}

export interface ClinicFeeRow {
  service: string
  length: string
  fee: string
  rebate: string
  gap: string
  /** at most the bulk-billed rows, earns the stamp */
  bulkBilled?: boolean
  /** one clause of fine print under the service name */
  note?: string
}

export interface ClinicChecklistItem {
  id: string
  label: string
  detail: string
}

export interface ClinicTeamMember {
  initials: string
  name: string
  credentials: string
  role: string
  /** usual days in the rooms, e.g. "Monday to Thursday" */
  days: string
  interests: string[]
}

export interface ClinicFaqItem {
  question: string
  answer: string | string[]
}

Frequently asked questions

How do I install the Medical Clinic Site Template component?

Register the @cleverui registry in your components.json ("@cleverui": "https://cleverops.com.au/r/{name}.json"), then run `npx shadcn@latest add @cleverui/template-medical-clinic`. The shadcn CLI copies the source into your project, you own the code from that point. You can also copy the source directly from this page.

What dependencies does Medical Clinic Site Template require?

Medical Clinic Site Template uses motion on top of React and Tailwind CSS. You don't need to install it manually, the shadcn CLI resolves and installs npm dependencies automatically when you add the component.

Can I theme Medical Clinic Site Template to match my brand?

Yes. The component is styled entirely with Tailwind utilities over standard design tokens (primary, background, muted, border), so it inherits your existing shadcn/ui theme automatically. Change your CSS variables and the component follows, no source edits needed for palette, radius, or fonts.

Want this built for you?

CleverUI is built by the Clever Ops web team. If you'd rather ship a hand-coded, fast, custom website than assemble one, we build them for Australian businesses every week.

Explore web development services