Allergy list

Installation

In a project set up as in Installation, run:

bunx shadcn@4.22.1 add https://organui.com/r/allergy-list.json

Or by name: bunx shadcn@4.22.1 add @organui/allergy-list.

The source installs into your UI components directory, along with shadcn's table if you do not have it yet. It holds no state, so it renders in server and client components alike.

Usage

import { AllergyList, type Allergy } from "@/components/ui/allergy-list"

const allergies: Allergy[] = [
  {
    id: "penicillin",
    substance: "Penicillin",
    reactions: ["Anaphylaxis"],
    severity: "severe",
    verification: "confirmed",
    recordedDate: "2003-05-14",
  },
  {
    id: "codeine",
    substance: "Codeine",
    type: "intolerance",
    reactions: ["Vomiting"],
    severity: "mild",
  },
]

export function Allergies() {
  return <AllergyList allergies={allergies} caption="Allergies" />
}

Recording allergies

Each allergy names its substance, the reactions it caused and the severity of the worst one. A severe reaction is bold with a warning icon, and a mild one muted, so the list never depends on color. Mark an intolerance, such as nausea from codeine, apart from an allergy, and an unconfirmed one apart from one confirmed by testing or a clear history. A resolved or inactive allergy stays on the list, struck through and muted, with its status in words.

Leave allergies out, or pass an empty list, when they have not been asked about; pass "none-known" once no known allergies has been recorded. The two read differently, because a missing answer is a reason to ask.

With the patient banner

allergySummary turns the list into the patient banner's allergies: each active substance with its first reaction, such as Penicillin (Anaphylaxis). Resolved allergies are left out, and a list where every allergy has resolved becomes no known allergies.

Layout

The table sizes to its container. Below 32rem wide, the date recorded moves under the substance so the table fits a phone without scrolling sideways. Dates are ISO 8601 strings shown as UTC dates in US English; pass formatDate for your own.

A display component, not decision support: it does not check prescriptions against allergies or cross-sensitivity. The examples are fictional.

Examples

import { AllergyList } from "@/components/ui/allergy-list"

export function Example() {

import { allergySummary } from "@/components/ui/allergy-list"
import {
  formatNhsNumber,