LiveReadouts
data-displayReal-time biometric readout panel with metric cards in responsive grid. Each card shows large monospace value, unit, trend arrow, status dot, and optional sparkline. Supports normal/warning/critical states and active pulse animation.
Import
import { LiveReadouts } from "packages/ui/src";Props
LiveReadoutsProps
| Prop | Type | Required |
|---|---|---|
metrics | ReadoutMetric[] | Yes |
title | string | No |
columns | 2|3|4 | No |
Examples
Kaleido-Life Biometrics
Live Readouts
Real-time biometric readout panel with sparklines, trend indicators, and color-coded status dots. Built from the Stitch “Clinical Sentinel” design system via the full pipeline.
Vital Signs (Normal)
Five biometric metrics in healthy range. Heart rate has active pulse animation. Sparklines show 5-minute trend history.
Patient Dashboard
Critical Alert State
Metrics in warning/critical range trigger color changes and blinking status indicators. Critical dots blink to draw attention.
Alert: Elevated Vitals
Minimal (No Trends/Sparklines)
Metrics can be displayed without optional features — just label and value. Auto-fit grid adapts to content width.