Three concentric SVG rings with their own progress levels and a matching legend of labels, values, and units.
New here? Read the installation guide.
import { Dashboard15 } from "@/components/beste/piece/dashboard15";
<Dashboard15
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.
Top-three ranking card with gold, silver, and bronze medal circles next to names and monospaced scores.
Horizontal milestone tracker with tone-filled done checks, a ringed current step, muted pending steps, and dates below.