Services & Fees

Installation

pnpm dlx shadcn@latest add @cleverui/clinic-services-menu

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

Usage

tsx

import { ClinicServicesMenu } from '@/components/blocks/clinic-services-menu'

Exampletsx

'use client'

import { ClinicServicesMenu } from '@/components/blocks/clinic-services-menu'

export default function ClinicServicesMenuDemo() {
  return (
    <ClinicServicesMenu
      heading="Services & fees"
      intro="Standard GP visits are bulk billed for concession card holders and children under 16. Private fees apply for longer consults and procedures."
      sections={[
        {
          title: 'General practice',
          items: [
            {
              name: 'Standard consult',
              description:
                'A usual visit for a single concern, prescription, certificate, or follow-up. Most people are seen within 15 minutes of their booking time.',
              length: '15 min',
              price: 'Bulk billed',
            },
            {
              name: 'Long consult',
              description:
                'Two or more concerns, a new problem that needs more time, or a careful medication review. We will tell you at check-in if a longer slot is needed.',
              length: '30 min',
              price: '$85',
            },
            {
              name: 'Health assessment',
              description:
                'A structured check for people 45–49 at risk of chronic disease, or annual assessments for people 75 and over.',
              length: '45 min',
              price: 'Bulk billed',
              note: 'Medicare item, available once per eligibility period',
            },
          ],
        },
        {
          title: 'Procedures & care',
          items: [
            {
              name: 'Skin check',
              description:
                'Full-body skin examination with dermoscopy. Suspicious lesions can often be biopsied the same day if you prefer.',
              length: '30 min',
              price: '$120',
            },
            {
              name: 'Iron infusion',
              description:
                'IV iron in the treatment room with nursing observation. Plan for about an hour on site including recovery.',
              length: '60 min',
              price: '$280',
              note: 'GP referral required, please bring recent blood results',
            },
            {
              name: 'Wound care & dressings',
              description:
                'Suture removal, dressing changes, and minor wound reviews with our practice nurse.',
              length: '20 min',
              price: '$55',
            },
          ],
        },
      ]}
      footnote="Medicare rebates apply to eligible items. Gap amounts are estimates, reception can confirm your out-of-pocket cost before you book."
    />
  )
}

API reference

ClinicServicesMenu accepts the following props.

Prop	Type	Default	Description
`heading`	`string`	`'Services & fees'`	–
`intro`	`string`	–	one plain sentence, e.g. what is bulk billed and what is not
`sections`*	`ClinicServiceSection[]`	–	–
`footnote`	`string`	–	quiet closing line, e.g. Medicare rebate and gap information

…plus everything from React.HTMLAttributes<HTMLElement>: className, event handlers, aria attributes and the rest pass straight through.

Referenced types

Typestsx

export interface ClinicServiceSection {
  title: string
  items: ClinicServiceItem[]
}

export interface ClinicServiceItem {
  name: string
  description?: string
  /** consult length, e.g. '15 min' */
  length?: string
  /** preformatted fee, e.g. '$85' */
  price?: string
  /** practical flag, e.g. 'GP referral required' */
  note?: string
}

Related components

Which Appointment Should I Book?

Consult types compared in plain language, length and fee in quiet figures, an honest best-for line each, and a calm not-sure fallback. A React and Tailwind decision aid for clinics.

Who You'll See

A who-you'll-see panel pairing practitioner roles, GP, practice nurse, physio, with plain one-line explanations of what each actually does, demystifying the visit before it happens.

Clinic Locations Strip

Multi-location clinic strip, suburb name, plain street address, a practical parking note, and an hours snippet in quiet mono per location, closed by one gentle closest-to-you hint.

Fees & Rebates

An honest fee transparency table, consult fee, Medicare rebate, and the out-of-pocket gap in true table semantics with tabular figures. React and Tailwind disclosure for clinics.

Before Your First Visit

First-visit checklist for new patients, what to bring and what to do beforehand in two calm columns, with an arrive-early aside. Plain-language React and Tailwind onboarding for clinics.

Patient Info Bar

The practical strip patients actually need, bulk-billing badge, accessibility notes, parking, and the after-hours line, set with the same care most sites reserve for heroes.

Frequently asked questions

How do I install the Services & Fees component?

Register the @cleverui registry in your components.json ("@cleverui": "https://cleverops.com.au/r/{name}.json"), then run `npx shadcn@latest add @cleverui/clinic-services-menu`. 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 Services & Fees require?

Services & Fees 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 Services & Fees 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.

Preview & code