Concentric activity rings with rounded gradient strokes, an animated sweep, a center slot and a legend with value and goal.
npx shadcn@latest add https://hyperblur.dev/r/progress-rings.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/progress-rings.tsx.
import { ProgressRings } from "@/components/hyperblur/progress-rings"
<ProgressRings rings={[{ label: "Move", value: 486, goal: 600, unit: "kcal" }]}><b>81%</b></ProgressRings>| Prop | Type | Default | Description |
|---|---|---|---|
| rings | { label: string; value: number; goal: number; unit?: string; color?: string; color2?: string }[] | Move, Exercise and Stand | Up to three rings, outermost first. color2 is the gradient end and defaults to a lighter tint of color. |
| size | number | 150 | Diameter of the ring stack in pixels. |
| thickness | number | 14 | Stroke width of each ring in pixels. |
| colors | string[] | ["#fb7185", "#34d399", "#2f7bff", "#fbbf24", "#8b5cf6", "#7fb3ff"] | Palette used by rings without a color. |
| showLegend | boolean | true | Show the legend rows beside the rings. They stack under the rings in narrow containers. |
| animate | boolean | true | Sweep the rings from empty on mount. |
| children | ReactNode | Content for the hollow center, such as a day number or an icon. |