asafefe.dev

Progress Ring

New

KPI rings that sweep to their value on view while the center number rolls up. Stack several for an activity style summary with a legend.

motionutils@soultel/rolling-number@soultel/use-reduced-motion-safe
Trials that created a project in week one
Q2 goals

Installation

$ pnpm dlx shadcn@latest add @soultel/progress-ring

No namespace set up? npx shadcn@latest add https://asafefe.dev/r/progress-ring.json works too.

Manual installation
  1. 1. Install the dependencies.
    terminal1 lines
    npm install motion
  2. 2. Copy the source from the Code tab into components/progress-ring.tsx.

Usage

example.tsx14 lines
import { ProgressRing } from "@/components/progress-ring"

export function Goals() {
  return (
    <ProgressRing
      legend
      rings={[
        { label: "Revenue", value: 84200, max: 100000 },
        { label: "New customers", value: 61, max: 80 },
        { label: "Activation", value: 38, max: 100 },
      ]}
    />
  )
}

Props

PropTypeDefaultDescription
value / maxnumber0 / 100Single ring value and goal.
labelstring-Metric name, shown under the number and used as the accessible name.
rings{ label: string; value: number; max?: number; color?: string }[]-Concentric rings, outermost first. The center shows the first one.
size / thickness / gapnumber140 / 12 / 4Diameter, stroke width and ring spacing in px.
centerReactNode-Replaces the rolling percentage.
legendbooleanfalseList each ring's label and value beside the rings.
formatValue(value, max) => string-Legend and screen reader value. Defaults to a percentage.