Health

13 components for health tracking, daily wellbeing, and care workflows.

Build a personal health dashboard, a wellness journal, or a care workspace with the same paper, ink, and hairlines as the rest of Vlak. Every component has a live specimen, a contextual example, and generated documentation for agents.

Browse the health collection

Readings and observations

Keep a reading with its unit, source, collection time, and result status. Compare only against the reference interval supplied with that result.

  • Health metric. A supplied health reading, unit, time and source with explicit pending, unavailable and stale states.
  • Reference range. Positions a supplied numeric reading against caller-supplied reference bounds, with a complete text equivalent.
  • Lab results. A named collection of supplied laboratory results with units, reference intervals, report times and amendment notes.
  • Symptom diary. A chronological record of supplied symptoms and intensity descriptions, with notes and 44px native detail disclosures.

Daily wellbeing

Collect a check-in, record a routine, review a sleep period, and follow personal goals as a bar or concentric rings. Keep unrecorded days and gaps visible.

  • Check-in. Collects one supplied text answer with native radio controls, 44px targets, and an explicit unanswered state.
  • Habit tracker. Shows dated complete, missed, skipped, and unrecorded states, with controlled completion actions and a responsive week view.
  • Sleep timeline. Displays supplied sleep, wake, and unknown intervals with explicit time labels, monochrome segments, and a complete text record.
  • Activity goal. Shows a supplied activity amount and target with native progress, visible units, and distinct missing-data states.
  • Activity rings. Shows one to six personal goals as concentric rings with a staggered entrance, gentle rotating encouragement, named progress and explicit missing-data states.

Care workflows

Keep patient identity and recorded context together. Show the supplied medication schedule, appointment details, and care tasks with explicit action states.

  • Patient banner. Keeps a supplied patient identity, identifiers, and recorded context together in a responsive band.
  • Medication schedule. Lists supplied medication, dose, time, and recorded status with controlled 44px recording actions.
  • Appointment card. Groups supplied appointment time, timezone, clinician, location, and status with an optional action slot.
  • Care plan. Lists supplied care tasks, owners, due labels, and statuses with controlled completion requests.

Start with a check-in and a reading

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

<CheckIn
  label="How is your energy today?"
  name="energy"
  options={[
    { value: "low", label: "Low" },
    { value: "steady", label: "Steady" },
    { value: "high", label: "High" },
  ]}
/>

<HealthMetric
  label="Resting heart rate"
  value={64}
  unit="bpm"
  source="Connected wearable"
  dateTime="2026-09-06T06:30:00Z"
  timeLabel="6 September, 08:30 CEST"
/>

The values above are fictional demonstration data. Supply the labels, options, and measurement context that belong to your product.

Data and action contracts

Preserve missing information

Zero is a reading. Missing, pending, unavailable, skipped, and not recorded describe different states. Pass the state explicitly and retain the original value.

Keep context with a value

Supply units, source, collection time, display labels, and the relevant time zone. Format dates in the application so the server and browser show the same appointment or measurement time.

Supply clinical meaning

The application supplies result flags, reference intervals, medication instructions, and care priorities. These components present that information; they do not calculate diagnoses, recommend doses, or classify a person from a reading.

Confirm recorded actions

Medication and care-plan callbacks express a requested action. Keep the item pending while saving, show the confirmed state after success, and preserve the prior record when saving fails.

Use text as well as geometry

Status is written in words. Ranges and timelines include text equivalents. Check-ins use named native choices, and controls retain keyboard access and 44px targets.

Connect the product boundary

The host application owns identity, access control, persistence, audit history, and any health-record integration. Examples use fictional records and local demonstration state.

Compose with the wider system

Use Number field for measurement entry, Date range picker for reporting periods, and Scheduler for booking. Message composer and Error summary support care conversations and submissions that need attention.

Agents can read this guide as Markdown, filter the MCP catalogue by health, or search for an individual component through the CLI.