Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Timeline blocks

Pro

Medical Records Timeline Block for React

Eight example health entries on a rail with visit, lab and medication tiles, each lab drawn against its reference range with High, Low or In range in words, opening to its values across visits.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Read a lab result against its range with this medical records timeline for React with Base UI. It is written for Carefold, a fictional personal health record, and every entry is example data for a made-up patient, not medical advice. A hairline frame with a plus mark on each corner holds eight entries from March to September on a vertical rail, each with a tile for its type: a visit, a lab or a medication. A lab row draws its result on a small gauge, where the shaded band is the reference range and the tick is the value, and says High, Low or In range in words with an arrow. It opens to that test's values across visits as a small line and a dated list. A three-way switch narrows the rail to all entries, labs or medication, and the page says it is an example record. It is built from SegmentGroup, Collapsible and Guides with CSS for the rail and the gauge. For patient portals, care summaries and any record where a value only means something next to its range.

FAQ

How do I change the entries and the tests?

Edit ENTRIES for the records (kind is visit, lab or med) and ANALYTES for each test's name, unit, range and gauge scale. High, Low and In range, the gauge positions and the history chart are all derived from the value and its range.

Is this medical advice?

No. The patient, the values and the ranges are invented, the page says so, and nothing is interpreted beyond placing a value against its range. A real record should show the ranges your lab prints for each result.

What stays in the page?

The view you pick and which labs are open. Nothing is saved or sent. To make it real, load the records from your patient system with their own reference ranges and keep the view in the URL.

Does the panel change height when I switch the view?

No. The other views are drawn unseen in the same place, so the tallest one sets the height.

Is it accessible?

A result is never only a position: each lab states its value, its unit, its range and High, Low or In range in text, and the chart repeats as a list. The switch has a visible label and the open state is on the real button.

How does it look on a phone?

The switch fills the width, and the result word sits at the end of the title row while the range moves under the value.

All 100 timeline blocks