Components/Feedback/RingProgress

RingProgress

Feedback

Circular donut progress indicator with size and colour control.

Compact circular progress indicator built with SVG. Supports multiple colored sections that sum to 100. Optional center label for the key metric.

Usage

import { RingProgress } from "nosible-ux"

export default function Example() {
  return (
    <RingProgress
      sections={[
        { value: 60, color: "#26D07C" },
        { value: 25, color: "#5FE09C" },
        { value: 15, color: "#FF3B3B" },
      ]}
      label="85%"
    />
  )
}

Examples

Signal breakdown ring

Props

Name	Type	Default	Description
`label`	`ReactNode`	—	Content rendered in the centre of the ring (e.g. a percentage label).
`roundCaps`	`boolean \| undefined`	`false`	When false, uses square stroke caps per brand spec.
`sections`	`RingProgressSection[]`	—	One or more arc sections, each with a value (0–100) and optional color.
`size`	`number \| undefined`	`80`	Outer diameter of the ring in pixels.
`thickness`	`number \| undefined`	`8`	Width of the ring stroke in pixels.

← All Components Getting Started →