Health metric

A supplied health reading, unit, time and source with explicit pending, unavailable and stale states.

Preview

Resting heart rate

64bpm

Recorded

Today, 08:30 CESTWearable

In action

Morning check-in

Wearable sync / 6 September

Resting heart rate

64bpm

Recorded

Today, 07:20 CESTWrist sensor

Sleep duration

7 h 35 min

Last recorded, stale

Yesterday, 07:00 CESTSleep log

Today's sleep record has not synced yet

When to use

Use it for

Patient summaries and wellness dashboards with a known source for each reading.
Pass status from the application's data policy; the component does not infer freshness.
Pass timeLabel with the relevant timezone when a human-readable time is needed.

Not for

Deriving a diagnosis, clinical flag or urgency from the number.
Using zero as a placeholder for missing data; omit value instead.

Install

Three ways in. They share one source, so the pixels match whichever you pick.

1. Import the package

npm install @noorddev/vlak-react

// once, next to your app's root
import "@noorddev/vlak-react/css";

import { HealthMetric } from "@noorddev/vlak-react";

Precompiled React and one stylesheet. No compiler to configure. Per-component imports work too: @noorddev/vlak-react/components/health-metric.

2. Vendor the source

npx @noorddev/vlak-cli add health-metric

The StyleX leaf lands in components/vlak/, for your own compiler to own. See StyleX.

3. Through shadcn

npx shadcn add https://vlak.dev/r/health-metric.json

The same registry item, installed by shadcn's CLI.

CSS only

<link rel="stylesheet" href="node_modules/@noorddev/vlak/css/vlak.css" />

No React. Link vlak.css and use the markup and classes below.

React

import { HealthMetric } from "@noorddev/vlak-react";

<HealthMetric
  label="Resting heart rate"
  value={64}
  unit="bpm"
  status="stale"
  dateTime="2026-09-05T07:20:00+02:00"
  timeLabel="5 Sep, 07:20 CEST"
  source="Wrist sensor"
  description="Waiting for the next device sync"
/>
<HealthMetric label="Sleep duration" status="pending" />

Props

HealthMetric

A sourced reading with explicit data availability, without clinical interpretation.

Prop	Type	Default	Description
`label`required	`ReactNode`
`value`	`string \| number \| null`		A supplied reading. Zero is a reading; empty strings and non-finite numbers are missing.
`unit`	`string`
`status`	`HealthMetricStatus`	`"available"`	Supplied by the application. Freshness is never inferred from the timestamp.
`statusLabel`	`ReactNode`
`dateTime`	`string`
`timeLabel`	`string`		Human-readable time, including the relevant timezone. Falls back to dateTime.
`source`	`ReactNode`
`description`	`ReactNode`

Also accepts HTMLAttributes<HTMLDivElement>.

Accessibility

Visible labels, units, status, source and time accompany the reading.
Zero is preserved; empty strings and non-finite values become unavailable. Pending and unavailable states suppress any supplied reading.
Stale values remain visible with a textual stale label. No clinical status is calculated.
A native time element preserves the supplied machine-readable timestamp. Native attributes and the div ref pass through.
The component adds no live region or tab stop. The application can announce updates in context.

Markup

<div class="rs-health-metric" data-status="stale">
  <p class="rs-health-metric-label">Resting heart rate</p>
  <p class="rs-health-metric-reading"><span class="rs-health-metric-value">64</span> <span class="rs-health-metric-unit">bpm</span></p>
  <p class="rs-health-metric-status">Last recorded, stale</p>
  <p class="rs-health-metric-meta"><time datetime="2026-09-05T07:20:00+02:00">5 Sep, 07:20 CEST</time><span>Wrist sensor</span></p>
</div>

Classes

.rs-health-metric.rs-health-metric-label.rs-health-metric-reading.rs-health-metric-value.rs-health-metric-unit.rs-health-metric-status.rs-health-metric-meta.rs-health-metric-description