Patient Status

import { PatientStatus } from '@/registry/qure/ui/patient-status'export default function PatientStatusDemo() {  return <PatientStatus status="appointment-upcoming" />}

Installation

npx shadcn@latest add https://qure-ui.qure.ai/r/patient-status.json

Usage

import { PatientStatus } from '@/components/ui/patient-status'

<PatientStatus status="appointment-no-show" />

This is one of the components with no shadcn equivalent — it comes from the Qure design system and encodes a workflow this product has and a general-purpose library does not.

The eight states

New patient

Unread messages

Report completed

Form pending

Scan available

Appointment scheduled

Appointment no-show

Appointment upcoming

import { PATIENT_STATUS_LABEL, PatientStatus, type PatientStatusKind } from '@/registry/qure/ui/patient-status'export default function PatientStatusAll() {  const all = Object.keys(PATIENT_STATUS_LABEL) as PatientStatusKind[]  return (    <div className="grid grid-cols-2 gap-x-8 gap-y-3 sm:grid-cols-4">      {all.map(status => (        <div key={status} className="flex flex-col items-center gap-2 text-center">          <PatientStatus status={status} />          <span className="text-xs text-muted-foreground">{PATIENT_STATUS_LABEL[status]}</span>        </div>      ))}    </div>  )}

Status	Dot	Means
`new`	—	Registered, nothing has happened yet
`scan`	—	Imaging available
`completed-report`	—	Report signed
`unread-messages`	brand	Messages waiting
`form-pending`	brand	Intake incomplete
`appointment-scheduled`	brand	Booked, nothing needed
`appointment-upcoming`	attention	Soon; may need preparation
`appointment-no-show`	urgent	Missed; someone must act

The glyph says what, the dot says how pressing. They are separate because a worklist cannot rely on colour alone — roughly 1 in 12 men has a red-green deficiency, and a reporting monitor is calibrated for images rather than for interface. Strip the colour out and the eight states are still distinguishable by shape.

That is also why the dot has only four values rather than eight. Urgency is a smaller vocabulary than status, and collapsing them would mean inventing a colour per state.

In a worklist

Ramesh Kulkarni

CT Chest

Anita Desai

X-ray Chest

Sunil Mehta

CT Head

import { Avatar, AvatarFallback } from '@/registry/qure/ui/avatar'import { PatientStatus } from '@/registry/qure/ui/patient-status'const ROWS = [  ['RK', 'Ramesh Kulkarni', 'CT Chest', 'appointment-no-show'],  ['AD', 'Anita Desai', 'X-ray Chest', 'unread-messages'],  ['SM', 'Sunil Mehta', 'CT Head', 'form-pending'],] as constexport default function PatientStatusRow() {  return (    <div className="flex w-full max-w-sm flex-col gap-3">      {ROWS.map(([initials, name, study, status]) => (        <div key={name} className="flex items-center gap-3">          <Avatar size="lg"><AvatarFallback>{initials}</AvatarFallback></Avatar>          <div className="min-w-0 flex-1">            <div className="truncate text-sm font-semibold">{name}</div>            <div className="text-xs text-muted-foreground">{study}</div>          </div>          <PatientStatus status={status} />        </div>      ))}    </div>  )}

Where it earns its place: one column, scannable down a list, no text needed until you look closely.

Size

import { PatientStatus } from '@/registry/qure/ui/patient-status'export default function PatientStatusSize() {  return (    <>      <PatientStatus size="sm" status="appointment-no-show" />      <PatientStatus size="md" status="appointment-no-show" />    </>  )}

24px is the Figma size and the default. 20px is for a dense table row where 24 crowds the line height.

Accessibility

The glyph is aria-hidden and the status is announced as visually-hidden text, so it is never lost to someone who cannot see or distinguish the icon:

<span className="sr-only">Appointment no-show</span>

PATIENT_STATUS_LABEL exports that wording, so a caller can reuse it in a tooltip or a filter without retyping it. Pass label to override.

import { PATIENT_STATUS_LABEL } from '@/components/ui/patient-status'

PATIENT_STATUS_LABEL['appointment-no-show'] // → "Appointment no-show"

The extraction hardcoded rgb(158,163,168) for every glyph and one of five rgb() literals for the dot. Both are tokens now, mapped onto the same brand/success/attention/urgent families every other status surface uses — so a red dot here and a red Badge in the next column mean the same thing.

API Reference

Prop

Type