Components
Every component opsinjs has specified, with the status of each, listed in one table so nobody has to guess whether something exists.
Every component in the catalogue is implemented and installable. Each has a
file under registry/bases/base/, a registry item the shadcn CLI copies into a project,
and a page that documents the cases it refuses as carefully as the ones it serves. Every
one is shipped, and no further: none has been through an independent
accessibility or clinical review, none is ready for a production health surface, and each
page lists what has not been measured rather than implying it has been. That status is on
every component page in prose and in machine-readable form, at a URL you can guess
from the component name.
That is what this page is for. The failure it exists to prevent is an agent, or a developer in a hurry, inferring an API from a plausible name and shipping it into a product that shows people their own health data. A definitive answer at a guessable URL is worth more than a 404, and far more than an invented answer.
60 shipped
Every id in the catalogue has code, a registry item and a hand-written page. Filter by
category or status, or search the synonyms: normal range, kpi, gauge, not medical advice, ago.
Every component in this catalogue has been audited against WCAG 2.2 AA, and none has had an independent accessibility review or a clinical review. The phase word says how installable the source is and says nothing about review. Nothing here is for a production health surface until a clinician has signed it.
| Component | What a reader sees | Category | Phase | Also known as |
|---|---|---|---|---|
| ResultCardresult-card | One test result, showing the number, what it is compared against, and what it means. | Health data display | Shipped | results, lab result, test result, report card, blood pressure, a1c |
| RangeBarrange-bar | A bar showing where one reading sits against the range it is compared with. | Health data display | Shipped | reference range, normal range, in range, range indicator, gauge bar |
| ScoreDialscore-dial | A single composite number drawn as a ring, with the words that say what it counts. | Health data display | Shipped | dial, ring, gauge, score, index, bmi |
| TrendSparklinetrend-sparkline | A small chart of one reading over time, with an honest caption saying what changed. | Health data display | Shipped | sparkline, trend, over time, mini chart, line chart, chart, graph |
| MetricTilemetric-tile | A compact tile showing one reading, its unit and when it was taken. | Health data display | Shipped | stat, kpi, vitals, summary tile, steps, resting heart rate, spo2, tile |
| StatusPillstatus-pill | A short label saying what a reading means and what, if anything, to do about it. | Health data display | Shipped | chip, status chip, status badge, status label, traffic light |
| TimelineEntrytimeline-entry | One dated event in a vertical history. | Health data display | Shipped | history item, event list, activity feed |
| RangeLegendrange-legend | The key explaining what the bands on a range mean. | Health data display | Shipped | key, chart legend, band legend |
| AlertBanneralert-banner | A prominent message about something that needs the reader's attention now. | Health communication | Shipped | warning banner, notification banner, inline alert, warning, notification, alert, banner |
| CareCardcare-card | A card saying what to do next, and how urgently. | Health communication | Shipped | what to do next, action card, advice card, next steps, guidance card, what to do, advice |
| Termterm | A clinical word with its everyday meaning attached, so a sentence can be read without leaving it. | Health communication | Shipped | glossary term, jargon, plain word, definition, plain english, tooltip term |
| ConsentSheetconsent-sheet | A sheet that asks permission for one specific thing, and records the answer. | Health communication | Shipped | consent, permission, opt in, data sharing, agree |
| DisclaimerNotedisclaimer-note | The standing note about what this information is and is not. | Health communication | Shipped | disclaimer, not medical advice, legal note, small print, safety note |
| SourceCitationsource-citation | Where a piece of health information came from, and when it was last checked. | Health communication | Shipped | citation, evidence link, reviewed by |
| LogSheetlog-sheet | A form for writing down what happened today, in as few taps as possible. | Health input | Shipped | log, diary, journal, daily entry, capture, quick entry, bottom sheet entry |
| ReadingInputreading-input | An input for typing in a measurement, with the unit shown and switchable beside the number. | Health input | Shipped | enter a reading, measurement input, numeric entry, manual entry, numeric input, unit switch |
| BodyMapbody-map | A diagram of a body for pointing at where something hurts. | Health input | Shipped | pain map, anatomy diagram, where does it hurt |
| Valuevalue | One number and its unit, formatted the same way everywhere in the product. | Health formatting | Shipped | number, unit, format a number, numeric display, figure, format, formatted number |
| RelativeTimerelative-time | When a reading was taken, said the way a person would say it. | Health formatting | Shipped | time ago, timestamp, last updated, date display, ago, freshness, staleness |
| Tabletable | Rows and columns of data. | Data display | Shipped | data table, grid, rows and columns |
| Badgebadge | A small label attached to something else. | Data display | Shipped | counter, label chip |
| Surfacesurface | The base panel every other surface is built from, at one of six material rungs. | Surfaces | Shipped | material, glass, blur, elevation, layer, translucency, vibrancy |
| Cardcard | A bounded block of related content. | Surfaces | Shipped | panel, container, content box, box, tile group |
| Sheetsheet | A panel that slides over the screen and can be dismissed by dragging. | Surfaces | Shipped | bottom sheet, drawer, side panel, slide over, modal sheet, detent |
| Dialogdialog | A window that interrupts, for the one decision that cannot wait. | Surfaces | Shipped | modal, alert dialog, confirm, popup |
| Calloutcallout | A short piece of set-apart information that helps you understand what you are reading without claiming anything about your health, whether it is a note, a tip or a caveat. | Feedback | Shipped | admonition, note box, info box, tip, note, aside |
| EmptyStateempty-state | What a screen shows when there is nothing to show, and what to do about it. | Feedback | Shipped | no data, nothing here, zero state, blank slate |
| Skeletonskeleton | The shape of content that has not arrived yet. | Feedback | Shipped | loading placeholder, shimmer, ghost, loading state, placeholder |
| SegmentedControlsegmented-control | A small row of mutually exclusive options. | Navigation | Shipped | segmented buttons, toggle group |
| TabBartab-bar | The persistent bar of top-level destinations at the bottom of the screen. | Navigation | Shipped | bottom navigation, nav bar |
| Stepperstepper | Progress through a sequence of steps. | Navigation | Shipped | wizard, step indicator, multi step |
| Buttonbutton | The control that makes something happen. | Actions and forms | Shipped | cta, action, submit, primary button |
| Linklink | Navigation to somewhere else. | Actions and forms | Shipped | anchor, hyperlink |
| Fieldfield | A labelled input with its help text, its error, and the wiring that connects them. | Actions and forms | Shipped | form field, input wrapper, form control, validation message, label, error message, hint |
| IconButtonicon-button | A button whose only visible content is an icon. | Actions and forms | Shipped | glyph button, round button |
| Switchswitch | An on-or-off control that takes effect immediately. | Actions and forms | Shipped | toggle |
| Checkboxcheckbox | A box for choosing any number of options, including none. | Actions and forms | Shipped | tick box, multi select |
| RadioGroupradio-group | A set of options where exactly one can be chosen. | Actions and forms | Shipped | radio buttons, single choice |
| Selectselect | Choosing one option from a list. | Actions and forms | Shipped | dropdown, picker |
| NumberFieldnumber-field | An input for a number, with steppers. | Actions and forms | Shipped | stepper input, quantity input |
| Textareatextarea | A multi-line text input. | Actions and forms | Shipped | long text, notes input |
| Dividerdivider | A line separating two groups of content. | Layout | Shipped | separator, rule |
| Avataravatar | A picture or initials standing for a person. | Utility | Shipped | profile picture, initials, user image |
| VisuallyHiddenvisually-hidden | Content that screen readers announce and eyes do not see. | Utility | Shipped | sr only, screen reader only, clip |
| GoalRinggoal-ring | Progress towards a daily goal, drawn as a closing ring. | Health data display | Shipped | activity ring, close your rings, daily goal |
| ScaleInputscale-input | A one-to-ten scale for rating something like pain or mood. | Health input | Shipped | pain scale, rating scale, likert |
| DoseTrackerdose-tracker | A record of medicine doses taken and missed. | Health input | Shipped | medication, pill tracker, dose, adherence tracker |
| Questionnairequestionnaire | A multi-question form for a validated instrument such as a symptom score. | Health input | Shipped | survey, assessment, phq, screening form |
| SymptomPickersymptom-picker | A picker for choosing symptoms from a controlled list. | Health input | Shipped | symptoms, how are you feeling, symptom checker |
| Toasttoast | A brief message that appears and disappears on its own. | Feedback | Shipped | snackbar, transient message, notification toast |
| Progressprogress | How far through something the reader is. | Feedback | Shipped | progress bar, completion |
| Spinnerspinner | An indeterminate loading indicator. | Feedback | Shipped | loader, busy indicator, activity indicator |
| Tooltiptooltip | A short label that appears on hover or focus. | Overlay | Shipped | hover label |
| Popoverpopover | A small panel anchored to the control that opened it. | Overlay | Shipped | anchored panel, flyout |
| Menumenu | A list of actions opened from a button. | Overlay | Shipped | dropdown menu, context menu, overflow menu |
| Tabstabs | Switching between views that occupy the same space. | Navigation | Shipped | tab list, view switcher |
| Accordionaccordion | Sections that expand one at a time. | Navigation | Shipped | disclosure, expander, collapsible |
| Sliderslider | Choosing a value by dragging along a track. | Actions and forms | Shipped | range input, drag to set |
| Comboboxcombobox | A text input that filters a list as you type. | Actions and forms | Shipped | autocomplete, typeahead, search select |
| ScrollAreascroll-area | A scrolling region with styled scrollbars. | Layout | Shipped | scroller, overflow container |
Status is a promise about change, not a quality score. shipped means the code
exists and is documented, and the API may move in any release. It says nothing about
whether anybody has reviewed it, and nobody has.
Release phases sets out what the three phases promise
about semver, the page's own outline and the registry.
Category does two jobs. It groups the sidebar, and it is load-bearing: any category
beginning with health- makes the Clinical meaning section and the governedBy
frontmatter mandatory, and the build fails without them. It makes their absence mandatory
elsewhere too, so Button cannot acquire a clinical meaning by accident.
Aliases are search synonyms, unique across the whole corpus, because the person searching does not know our vocabulary. Someone typing normal range wants RangeBar, and the first thing that page tells them is that normal is a banned word, and why.
Governed by links a component to the doctrine that constrains it. Doctrine is written once in Health and referenced from every component that must obey it, in both directions, so a rule cannot quietly end up applying to nothing.
If you are choosing a component, the decision table in Choose a component maps the shape of your data to the component that displays it. Reading that table is faster than reading every page. If you are writing or reviewing one of these pages, read Anatomy of a component page; it publishes the page contract once so you fill in a template instead of inventing a structure. If you are here to judge whether opsinjs is worth building on, read RangeBar: it carries the most detailed clinical contract in the set and it is the component the rest of the system is arranged around.
How this is generated
The table above is not hand-maintained. Every row comes from registry/catalogue.ts,
the single declaration of every component id, its category, its status and its alias
namespace. scripts/build-registry.mts reads it and writes lib/generated/catalogue.json
and public/r/index.json; <StatusMatrix> renders that JSON and <SectionProgress>
counts it.
Nothing here is typed twice. If a row is wrong the catalogue is wrong, and editing this
page cannot fix it. scripts/assert-ia.mts fails the build when a catalogue id is missing
the page it should have, when a page claims an id the catalogue does not know, or when two
pages claim the same alias.
Lyra and the docs chrome
This documentation site is dense, square and neutral. The design system it documents is none of those things, and the difference is deliberate.
Anatomy of a component page
The fourteen sections a shipped component page may carry, the eight it must, and the word budget it fits inside.