Three concentric progress rings for move, exercise, and stand goals with a color-keyed legend.
The import and the props worth knowing about, in one place.
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"
}
]}
/>Cycle ring with day fraction in the middle, a phase label, next-period forecast, and a mood note.
Lift tracker with an exercise header, set progress bar segments, and a rest-timer chip on the right.
Daily steps card with a gradient progress bar, percent chip, and a distance and calorie footer.
Guided breathwork card with a pulsing sky ring, phase label, big second count, and cycle note.