Activity Rings

Three concentric SVG rings with their own progress levels and a matching legend of labels, values, and units.

  • Move
    72 kcal
  • Exercise
    54 min
  • Stand
    88 hr

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

Import & use
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"
    }
  ]}
/>