opsinjs

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.

Filter by categoryCategory
ComponentWhat a reader seesCategoryPhaseAlso known as
ResultCardresult-cardOne test result, showing the number, what it is compared against, and what it means.Health data displayShippedresults, lab result, test result, report card, blood pressure, a1c
RangeBarrange-barA bar showing where one reading sits against the range it is compared with.Health data displayShippedreference range, normal range, in range, range indicator, gauge bar
ScoreDialscore-dialA single composite number drawn as a ring, with the words that say what it counts.Health data displayShippeddial, ring, gauge, score, index, bmi
TrendSparklinetrend-sparklineA small chart of one reading over time, with an honest caption saying what changed.Health data displayShippedsparkline, trend, over time, mini chart, line chart, chart, graph
MetricTilemetric-tileA compact tile showing one reading, its unit and when it was taken.Health data displayShippedstat, kpi, vitals, summary tile, steps, resting heart rate, spo2, tile
StatusPillstatus-pillA short label saying what a reading means and what, if anything, to do about it.Health data displayShippedchip, status chip, status badge, status label, traffic light
TimelineEntrytimeline-entryOne dated event in a vertical history.Health data displayShippedhistory item, event list, activity feed
RangeLegendrange-legendThe key explaining what the bands on a range mean.Health data displayShippedkey, chart legend, band legend
AlertBanneralert-bannerA prominent message about something that needs the reader's attention now.Health communicationShippedwarning banner, notification banner, inline alert, warning, notification, alert, banner
CareCardcare-cardA card saying what to do next, and how urgently.Health communicationShippedwhat to do next, action card, advice card, next steps, guidance card, what to do, advice
TermtermA clinical word with its everyday meaning attached, so a sentence can be read without leaving it.Health communicationShippedglossary term, jargon, plain word, definition, plain english, tooltip term
ConsentSheetconsent-sheetA sheet that asks permission for one specific thing, and records the answer.Health communicationShippedconsent, permission, opt in, data sharing, agree
DisclaimerNotedisclaimer-noteThe standing note about what this information is and is not.Health communicationShippeddisclaimer, not medical advice, legal note, small print, safety note
SourceCitationsource-citationWhere a piece of health information came from, and when it was last checked.Health communicationShippedcitation, evidence link, reviewed by
LogSheetlog-sheetA form for writing down what happened today, in as few taps as possible.Health inputShippedlog, diary, journal, daily entry, capture, quick entry, bottom sheet entry
ReadingInputreading-inputAn input for typing in a measurement, with the unit shown and switchable beside the number.Health inputShippedenter a reading, measurement input, numeric entry, manual entry, numeric input, unit switch
BodyMapbody-mapA diagram of a body for pointing at where something hurts.Health inputShippedpain map, anatomy diagram, where does it hurt
ValuevalueOne number and its unit, formatted the same way everywhere in the product.Health formattingShippednumber, unit, format a number, numeric display, figure, format, formatted number
RelativeTimerelative-timeWhen a reading was taken, said the way a person would say it.Health formattingShippedtime ago, timestamp, last updated, date display, ago, freshness, staleness
TabletableRows and columns of data.Data displayShippeddata table, grid, rows and columns
BadgebadgeA small label attached to something else.Data displayShippedcounter, label chip
SurfacesurfaceThe base panel every other surface is built from, at one of six material rungs.SurfacesShippedmaterial, glass, blur, elevation, layer, translucency, vibrancy
CardcardA bounded block of related content.SurfacesShippedpanel, container, content box, box, tile group
SheetsheetA panel that slides over the screen and can be dismissed by dragging.SurfacesShippedbottom sheet, drawer, side panel, slide over, modal sheet, detent
DialogdialogA window that interrupts, for the one decision that cannot wait.SurfacesShippedmodal, alert dialog, confirm, popup
CalloutcalloutA 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.FeedbackShippedadmonition, note box, info box, tip, note, aside
EmptyStateempty-stateWhat a screen shows when there is nothing to show, and what to do about it.FeedbackShippedno data, nothing here, zero state, blank slate
SkeletonskeletonThe shape of content that has not arrived yet.FeedbackShippedloading placeholder, shimmer, ghost, loading state, placeholder
SegmentedControlsegmented-controlA small row of mutually exclusive options.NavigationShippedsegmented buttons, toggle group
TabBartab-barThe persistent bar of top-level destinations at the bottom of the screen.NavigationShippedbottom navigation, nav bar
StepperstepperProgress through a sequence of steps.NavigationShippedwizard, step indicator, multi step
ButtonbuttonThe control that makes something happen.Actions and formsShippedcta, action, submit, primary button
LinklinkNavigation to somewhere else.Actions and formsShippedanchor, hyperlink
FieldfieldA labelled input with its help text, its error, and the wiring that connects them.Actions and formsShippedform field, input wrapper, form control, validation message, label, error message, hint
IconButtonicon-buttonA button whose only visible content is an icon.Actions and formsShippedglyph button, round button
SwitchswitchAn on-or-off control that takes effect immediately.Actions and formsShippedtoggle
CheckboxcheckboxA box for choosing any number of options, including none.Actions and formsShippedtick box, multi select
RadioGroupradio-groupA set of options where exactly one can be chosen.Actions and formsShippedradio buttons, single choice
SelectselectChoosing one option from a list.Actions and formsShippeddropdown, picker
NumberFieldnumber-fieldAn input for a number, with steppers.Actions and formsShippedstepper input, quantity input
TextareatextareaA multi-line text input.Actions and formsShippedlong text, notes input
DividerdividerA line separating two groups of content.LayoutShippedseparator, rule
AvataravatarA picture or initials standing for a person.UtilityShippedprofile picture, initials, user image
VisuallyHiddenvisually-hiddenContent that screen readers announce and eyes do not see.UtilityShippedsr only, screen reader only, clip
GoalRinggoal-ringProgress towards a daily goal, drawn as a closing ring.Health data displayShippedactivity ring, close your rings, daily goal
ScaleInputscale-inputA one-to-ten scale for rating something like pain or mood.Health inputShippedpain scale, rating scale, likert
DoseTrackerdose-trackerA record of medicine doses taken and missed.Health inputShippedmedication, pill tracker, dose, adherence tracker
QuestionnairequestionnaireA multi-question form for a validated instrument such as a symptom score.Health inputShippedsurvey, assessment, phq, screening form
SymptomPickersymptom-pickerA picker for choosing symptoms from a controlled list.Health inputShippedsymptoms, how are you feeling, symptom checker
ToasttoastA brief message that appears and disappears on its own.FeedbackShippedsnackbar, transient message, notification toast
ProgressprogressHow far through something the reader is.FeedbackShippedprogress bar, completion
SpinnerspinnerAn indeterminate loading indicator.FeedbackShippedloader, busy indicator, activity indicator
TooltiptooltipA short label that appears on hover or focus.OverlayShippedhover label
PopoverpopoverA small panel anchored to the control that opened it.OverlayShippedanchored panel, flyout
MenumenuA list of actions opened from a button.OverlayShippeddropdown menu, context menu, overflow menu
TabstabsSwitching between views that occupy the same space.NavigationShippedtab list, view switcher
AccordionaccordionSections that expand one at a time.NavigationShippeddisclosure, expander, collapsible
SlidersliderChoosing a value by dragging along a track.Actions and formsShippedrange input, drag to set
ComboboxcomboboxA text input that filters a list as you type.Actions and formsShippedautocomplete, typeahead, search select
ScrollAreascroll-areaA scrolling region with styled scrollbars.LayoutShippedscroller, 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.

On this page