Activity Rings

Three concentric progress rings for move, exercise, and stand goals with a color-keyed legend.

Move420 / 600 kcal
Exercise32 / 45 min
Stand10 / 12 hr

Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.

Import & use
import { Health5 } from "@/components/beste/piece/health5";

<Health5
  rings={[
    {
      "label": "Move",
      "value": "420",
      "goal": "600 kcal",
      "pct": 70,
      "text": "text-rose-500",
      "stroke": "stroke-rose-500"
    },
    {
      "label": "Exercise",
      "value": "32",
      "goal": "45 min",
      "pct": 71,
      "text": "text-emerald-500",
      "stroke": "stroke-emerald-500"
    },
    {
      "label": "Stand",
      "value": "10",
      "goal": "12 hr",
      "pct": 83,
      "text": "text-sky-500",
      "stroke": "stroke-sky-500"
    }
  ]}
/>