Care Overview Dashboard

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its badge 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/health2.tsx instead.

Usage

The file also exports health2Demo, 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 { Health2, health2Demo } from "@/components/blocks/health/health2";

export default function Page() {
  return <Health2 {...health2Demo} />;
}

Props

Types

type OutcomeStat = { label: string; value: string };

Behavior notes

• The eyebrow and the hairline rule beneath it render together or not at all, based only on eyebrow being set.
• retentionValue is clamped to 0-100 before it drives both the displayed percentage and the ring's strokeDashoffset, so an out-of-range prop can't overshoot the ring.
• The status strip's dot and "Live" badge are decorative placeholders standing in for a real-time status feed; no data is actually live or polled.
• The ring is a static SVG (two stacked <circle> elements with a fixed strokeDasharray/strokeDashoffset) computed from retentionValue at render time, not animated or updated after mount.