Circular Progress

v0.1.0

Pure-SVG radial gauge with a center label, token-driven colors, and progressbar semantics.

Install

npx shadcn@latest add @signalos/circular-progress

Requires a configured @signalos registry and a valid SIGNALOS_REGISTRY_TOKEN - get access. Registry dependencies (@signalos/tokens, @signalos/utils) are pulled automatically.

Preview

Example & code

circular-progress.example.tsx

// Example: status-colored gauges with custom labels.
import { CircularProgress } from "@/components/widgets/circular-progress/CircularProgress"

export default function Example() {
  return (
    <div className="flex items-end gap-8">
      <div className="flex flex-col items-center gap-2">
        <CircularProgress
          value={96}
          size={72}
          strokeWidth={6}
          colorClass="text-success-500"
        />
        <span className="text-stat-label text-muted-foreground">SLA</span>
      </div>
      <div className="flex flex-col items-center gap-2">
        <CircularProgress
          value={64}
          size={72}
          strokeWidth={6}
          colorClass="text-warning-500"
        />
        <span className="text-stat-label text-muted-foreground">Coverage</span>
      </div>
      <div className="flex flex-col items-center gap-2">
        {/* Custom center label instead of a percentage: */}
        <CircularProgress
          value={88}
          size={72}
          strokeWidth={6}
          formatLabel={(v) => `${(v / 100).toFixed(2)}`}
        />
        <span className="text-stat-label text-muted-foreground">
          Confidence
        </span>
      </div>
    </div>
  )
}

Props

CircularProgressProps

Prop	Type	Default	Description
value*	`number`	-	Progress value from 0 to 100.
size	`number \| undefined`	40	Diameter of the gauge in pixels.
strokeWidth	`number \| undefined`	4	Stroke width of the arc in pixels.
showLabel	`boolean \| undefined`	true	Whether to render the numeric label in the center.
formatLabel	`((value: number) => string) \| undefined`	-	Custom formatter for the center label. Defaults to `${value}%`.
colorClass	`string \| undefined`	"text-primary"	Tailwind text-* class driving the arc color (uses stroke-current).
className	`string \| undefined`	-

Changelog

circular-progress

0.1.0

Initial release, lifted from signal-core-ui CircularProgress.
Default arc color changed from text-teal-500 to token-backed text-primary.
Added showLabel, formatLabel, value clamping, and role="progressbar" semantics.