01 / RESULT PROTOCOL
7
STATESResult states per component
Final, preliminary, corrected, amended, critical, absent, uninterpreted.
OX / 01Healthcare data systems · FHIR-nativeBuild on meaning
FHIR R4 · source-first · MIT core
The design system for healthcare.
30 accessible components typed to FHIR R4 — where a missing value, an unrecorded one, and one nobody has read yet are three different things on screen.
Source is copied into your repo. Yours to read, audit and change.
npx @zoblocks/cli add pulse-loaderSource copiedWCAG 2.2 AANo runtime deps
Worked exampleObservation · potassium
Held to
WCAG 2.2 AAReduced motionForced coloursLight + darkToken-themedSSR-safe0 dependencies
Live · the real components
Loading your records
Pulse
Heart and rhythm line, 60 bpm
Loading results
Rhythm
One strip, swept
Loading your information
Breath
15 a minute
Running the panel
Helix
For the lab
Importing records
Infusion
Determinate
Paced to resting physiology rather than to a spinner: 60 beats a minute, a seven percent beat, nothing above 1.7 Hz. Each one is installed on its own, respects prefers-reduced-motion with a designed still state, and announces the wait in words.
Why this exists
The states your demo skips are the states your users hit.
A generic card renders a value. It has no opinion about a result that came back preliminary, a range that doesn’t exist, a record flagged restricted, or a potassium of 6.8. Those aren’t edge cases. They are Tuesday.
02 / LAYOUT SYSTEM
3
MODESDensity modes
Patient-facing, standard admin, and clinical-dense — switchable at any container.
03 / SOURCE RUNTIME
0
ADDEDRuntime dependencies added
The components are source. Nothing sits between you and the render.
New · Data Grid
A worklist is a claim about a population.
Scroll it, sort it, select rows. This is the shipped component, not a picture of one.
Caseload worklist
Adult outpatient · Team 4 · updated 11:47
Program IOP, PHPRisk screen on file
3 results arrived at 11:47 — nothing moved.
 Adeyemi, R.4471902 | IOP | Ideation with plan | 0.82 | Today 14:00 | A. Vance | |
 Raman, A.3320145 | PHP | Ideation, no plan | 0.68 | Today 15:30 | A. Vance | |
 Okafor, B.8812004 | IOP | Ideation, no plan | 0.61 | Mon 8:30 | A. Vance | |
 Silva, M.4420931 | PHP | Ideation, no plan | 0.57 | Tue 9:00 | T. Boateng | |
 Mensah, A.7731905 | PHP | Ideation, no plan | 0.52 | Mon 13:00 | T. Boateng | |
 Kowalski, P.5140276 | IOP | Ideation, no plan | 0.51 | Fri 12:30 | A. Vance | |
 Haddad, N.6690321 | IOP | None reported | 0.41 | Fri 18:20 | K. Marsh | |
 Nguyen, T.1176284 | IOP | Ideation, no plan | 0.40 | Thu 16:30 | A. Vance | |
 Farah, Y.6620158 | PHP | Passive ideation | 0.40 | Fri 8:00 | T. Boateng | |
 Vasquez, I.2214870 | PHP | Ideation, no plan | 0.39 | Today 17:10 | S. Okafor | |
 Weber, J.5567842 | PHP | Passive ideation | 0.32 | Thu 12:00 | T. Boateng | |
 Ortiz, E.2214009 | IOP | Passive ideation | 0.31 | Wed 11:30 | A. Vance | |
 Costa, D.1148936 | IOP | Passive ideation | 0.25 | Tue 15:30 | A. Vance | |
 Bello, F.9963410 | PHP | Passive ideation | 0.21 | Wed 16:00 | T. Boateng | |
 Yusuf, Z.3327469 | IOP | None reported | 0.12 | Mon 10:30 | A. Vance |
15 of 130 clients loaded.
Click a cell and use the arrow keys. Every name and number is invented.
All 14 statesThe library
6 components, at the size you would actually use them.
Every one below is the real component, running. Operate it — right-click a patient, type into the date field, throw the switch. Nothing here is a screenshot.
A. Vance, MD — attending
Signed 12 Aug 2026, 16:20 +05:30, on a note whose text hash is stored beside it.
Provenance/9f2c · agent · Practitioner/7
01/Signature
Provenance
It records what was on screen at the moment of signing, so a countersignature can be defended a year later.
- 22 props
- Draw, type or certify
- Bound to what was shown
02/Loaders
Five waits with different meanings, each with a designed reduced-motion state rather than a spinner that simply stops.
- 5 loaders
- Reduced motion designed
- Announced, not silent
Right-click a row yourself. The header is what the pointer lands on.
Aluel OkonkwoMRN 44-2871 · 34y10:30Chidi NwosuMRN 44-9013 · 41y11:00
Ama BoatengMRN 44-7755 · 29y11:3003/Context menu
Patient
It names the record before it offers to change it, so the first thing under the pointer is never a verb.
- 16 props
- 4 consequence tiers
- Withheld is counted, not hidden
Follow-up, 12 Aug 2026. Reviewed by A. Vance, MD.
Chief complaint: six weeks of progressive fatigue and dyspnea.
Signed 12 Aug, 16:20 +05:30.
04/Tabs
Eleven skins over one accessibility tree, so choosing a look is never a choice about whether a keyboard works.
- 30 props
- Four semantic modes
- APG roving tabindex
Contact precautionsGown and gloves on entry.In effectFalls riskAdds the bed sensor to the round list.Not assessed
05/Switch
Flag
Three values, not two: on, off, and nobody has said. The commit is visible, reversible, and survives a conflict.
- 44 props
- Third value: unknown
- Optimistic with rollback
Mo
Tu
We
Th
Fr
Sa
Su
Mo
Tu
We
Th
Fr
Sa
Su
06/Date & time
Period
One contract behind every temporal control — a range is two clicks with a live preview between them, and nothing reaches your state until Done.
- 16 variants
- 8 keystrokes, no calendar
- Two months, one tab stop
Quality
Claims we are willing to be held to.
- Accessibility, stated as a target
- WCAG 2.2 AA is the bar, and it is enforced in CI — every page is audited with axe-core in both light and dark on each commit. That check found and fixed four real violations, three of them in the clinical status tokens themselves. Automated testing catches roughly a third of WCAG issues, so keyboard and screen-reader passes remain manual.
- Status is never colour alone
- Every severity carries an icon, a text label, and a second structural cue. View any component in forced-colors mode: nothing that mattered disappears.
- Synthetic data, always
- Every fixture, demo, and screenshot uses invented values on reserved example.org systems. No PHI enters this repository, its issues, or its analytics.
- What this is not
- ZoBlocks is not a compliance boundary. It does not make an application HIPAA, GDPR, or DPDP compliant, and it is not a medical device. It is well-built UI; the clinical and regulatory obligations remain yours.
Healthcare engineering services
- 10+
- years in healthcare
- 50+
- EHR integrations
- 0
- clients lost
Healthcare expertise, on your team.
- AI-native product engineeringWeb, mobile, backend and cloud, end to end
- Enterprise integrationFHIR, HL7, Epic and Cerner. Legacy modernised in steps
- Embedded engineering podsSenior engineers who scale with the roadmap
- AI governance and adoptionHIPAA- and SOC 2-aware AI, with eval pipelines
Clients and work
Netsmart
since 20170incidents, 14-week cutover
9 yrs
Install one component. See if it holds up.
The core is MIT. Nothing is gated behind an account, and the source lands in your repository where you can read every line before you trust it.
npx @zoblocks/cli add pulse-loaderRun zoblocks init once to say where your @/ alias points. The public catalogue needs no configuration and no account — paid components add a registry namespace and a token.