Skip to main content
Clever Ops

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.

Preview & code

Loading Who You'll See preview

Installation

pnpm dlx shadcn@latest add @cleverui/care-team-intro

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

Usage

tsx
import { CareTeamIntro } from '@/components/blocks/care-team-intro'
Exampletsx
'use client'

import { CareTeamIntro } from '@/components/blocks/care-team-intro'

export default function CareTeamIntroDemo() {
  return (
    <CareTeamIntro
      heading="Who you'll see"
      intro="Every visit starts with the right person, here's who does what."
      roles={[
        {
          icon: 'gp',
          role: 'General practitioner',
          whatTheyDo:
            'Listens to your concerns, examines you, orders tests if needed, and manages most common conditions.',
          note: 'You can request a particular doctor when you book.',
        },
        {
          icon: 'nurse',
          role: 'Practice nurse',
          whatTheyDo:
            'Takes your history, runs routine checks, and handles dressings, immunisations, and chronic-care reviews.',
        },
        {
          icon: 'reception',
          role: 'Reception team',
          whatTheyDo:
            'Books appointments, checks you in, and helps with Medicare forms, referrals, and results collection.',
        },
        {
          icon: 'physio',
          role: 'Physiotherapist',
          whatTheyDo:
            'Assesses movement and injury, builds a recovery plan, and guides exercises you can do at home.',
        },
        {
          icon: 'specialist',
          role: 'Visiting specialist',
          whatTheyDo:
            'Sees patients referred by a GP for focused care, skin checks, cardiology, and women\'s health on selected days.',
          note: 'A GP referral is usually required.',
        },
        {
          icon: 'care',
          role: 'Care coordinator',
          whatTheyDo:
            'Helps with longer-term plans, linking you to community services, follow-ups, and shared care with hospitals.',
        },
      ]}
      footnote="You can always ask to see the same person each visit, just mention it when you book."
    />
  )
}

API reference

CareTeamIntro accepts the following props.

PropTypeDefaultDescription
headingstring"Who you'll see"
introstring"Every visit starts with the right person, here's who does what."one plain sentence carrying the block's single accent keyline
roles*CareTeamRole[]roles not names, what each person does on the floor
footnotestringquiet closing line, e.g. continuity of care

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

Referenced types

Typestsx
export interface CareTeamRole {
  icon?: CareTeamIconKey
  role: string
  whatTheyDo: string
  note?: string
}

export type CareTeamIconKey =
  | 'gp'
  | 'nurse'
  | 'physio'
  | 'reception'
  | 'specialist'
  | 'care'

Frequently asked questions

How do I install the Who You'll See component?

Register the @cleverui registry in your components.json ("@cleverui": "https://cleverops.com.au/r/{name}.json"), then run `npx shadcn@latest add @cleverui/care-team-intro`. 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 Who You'll See require?

Who You'll See uses motion and lucide-react on top of React and Tailwind CSS. You don't need to install them manually, the shadcn CLI resolves and installs npm dependencies automatically when you add the component.

Can I theme Who You'll See 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