Patient banner

Keeps a supplied patient identity, identifiers, and recorded context together in a responsive band.

Preview

In action

Before the visit

A fictional record. Unknown context stays visible until someone reviews it.

When to use

Use it for

Patient record headers and care workspaces where identity and recorded context must stay together.
Supply explicit values such as Unknown, Not reviewed, or None recorded according to the actual source record.

Not for

Inferring age from a birth date or treating missing context as no allergies.
Urgent notifications that need a live announcement; the banner is static context.

Install

Three ways in. They share one source, so the pixels match whichever you pick.

1. Import the package

npm install @noorddev/vlak-react

// once, next to your app's root
import "@noorddev/vlak-react/css";

import { PatientBanner } from "@noorddev/vlak-react";

Precompiled React and one stylesheet. No compiler to configure. Per-component imports work too: @noorddev/vlak-react/components/patient-banner.

2. Vendor the source

npx @noorddev/vlak-cli add patient-banner

The StyleX leaf lands in components/vlak/, for your own compiler to own. See StyleX.

3. Through shadcn

npx shadcn add https://vlak.dev/r/patient-banner.json

The same registry item, installed by shadcn's CLI.

CSS only

<link rel="stylesheet" href="node_modules/@noorddev/vlak/css/vlak.css" />

No React. Link vlak.css and use the markup and classes below.

React

import { PatientBanner } from "@noorddev/vlak-react";

<PatientBanner patientName="Robin Ellis" identifiers={[{ id: "record", label: "Patient ID", value: "Demo 042" }]} contextItems={[{ id: "allergies", label: "Allergies", value: "Not reviewed" }, { id: "language", label: "Preferred language", value: "English, as recorded" }]} />

Props

PatientBanner

A supplied patient identity and explicitly recorded context, without clinical inference.

Prop	Type	Default	Description
`patientName`required	`string`		Caller-supplied identity. No age or other demographic values are inferred.
`identifiers`	`readonly PatientBannerIdentifier[]`	`[]`
`contextItems`	`readonly PatientBannerContextItem[]`	`[]`
`identifiersEmptyLabel`	`ReactNode`	`"Identifiers not supplied"`
`contextEmptyLabel`	`ReactNode`	`"Patient context not supplied"`	Missing context never means that no allergies or alerts exist.

Also accepts HTMLAttributes<HTMLDivElement>.

Keyboard

Keys	Does
`None`	Static identity and description lists add no keyboard stop. Any supplied child controls keep their native behavior.

Accessibility

The patient name labels a group; identifiers and context use dl, dt, and dd in reading order.
Unknown and none-recorded distinctions are supplied as visible text. Empty defaults describe missing data without making clinical claims.
The root forwards its div ref, native attributes, className, and style.

Markup

<div class="rs-patient-banner" role="group" aria-label="Robin Ellis"><p class="rs-patient-banner-name">Robin Ellis</p><dl class="rs-patient-banner-identifiers"><div class="rs-patient-banner-field"><dt class="rs-patient-banner-label">Patient ID</dt><dd class="rs-patient-banner-value">Demo 042</dd></div></dl><dl class="rs-patient-banner-context"><div class="rs-patient-banner-field"><dt class="rs-patient-banner-label">Allergies</dt><dd class="rs-patient-banner-value">Not reviewed</dd></div></dl></div>

Classes

.rs-patient-banner.rs-patient-banner-name.rs-patient-banner-identifiers.rs-patient-banner-field.rs-patient-banner-label.rs-patient-banner-value.rs-patient-banner-context.rs-patient-banner-missing