Three concentric SVG rings with their own progress levels and a matching legend of labels, values, and units.
The import and the props worth knowing about, in one place.
import { Dashboard15 } from "@/components/beste/piece/dashboard15";
<Dashboard15
surface="card"
bordered={true}
inverted={false}
rings={[
{
"label": "Move",
"value": 72,
"unit": "kcal",
"tone": "rose"
},
{
"label": "Exercise",
"value": 54,
"unit": "min",
"tone": "emerald"
},
{
"label": "Stand",
"value": 88,
"unit": "hr",
"tone": "sky"
}
]}
/>Radial progress gauge with a tone-colored arc, the percentage centered, and a caption line beside it.
Three horizontally divided metric cells in one card, each with a label, value, and semantic delta arrow.
Horizontal milestone tracker with tone-filled done checks, a ringed current step, muted pending steps, and dates below.
Top-three ranking card with gold, silver, and bronze medal circles next to names and monospaced scores.