Vitals Dashboard

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its dependencies and any missing npm packages, and installs them straight into your project.

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/health/health10.tsx instead.

Usage

The file also exports health10Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Health10, health10Demo } from "@/components/blocks/health/health10";

export default function Page() {
  return <Health10 {...health10Demo} />;
}

Props

Types

type VitalMetric = {
  label: string;
  value: string;
  unit: string;
  trend: "up" | "down" | "flat";
  trendValue: string;
};

Behavior notes

• trend and trendValue are static props, not computed from any history or live device feed; "up"/"down"/"flat" each render a fixed TrendingUp/TrendingDown/Minus icon next to the trendValue string.
• The "flat" trend shares the same muted color treatment as "down" but renders a Minus icon instead of TrendingDown.
• Each metric's icon is picked from a fixed four-icon set by array position (not matched to metric.label), so a metrics array longer than four will cycle rather than semantically match.
• value and unit are separate static strings rather than a single formatted number, so callers can pass irregular formats like "7h 12m" with an empty unit, as the sleep metric does in the demo.