RingProgress

Renders a circular SVG progress ring composed of one or more colored arc segments. Optionally renders a label in the center — perfect for stats, gauges, and dashboard metrics.

Single segment

<RingProgress sections={[{ value: 65, color: 'blue' }]} />

With center label

75%

42%

<RingProgress
  sections={[{ value: 75, color: 'violet' }]}
  label={<Text fw={700}>75%</Text>}
/>

Multi-segment

Blue: 40%Violet: 25%Green: 20%Orange: 10%
<RingProgress
  size={140}
  sections={[
    { value: 40, color: 'blue', tooltip: 'Blue: 40%' },
    { value: 25, color: 'violet', tooltip: 'Violet: 25%' },
    { value: 20, color: 'green', tooltip: 'Green: 20%' },
    { value: 10, color: 'orange', tooltip: 'Orange: 10%' },
  ]}
/>

Round caps and thickness

<RingProgress
  sections={[{ value: 60, color: 'blue' }]}
  roundCaps
  thickness={8}
/>
<RingProgress
  sections={[{ value: 60, color: 'teal' }]}
  thickness={20}
/>

Props

PropTypeDefaultDescription
sectionsRingProgressSection[]—Arc segment definitions (required). Each has value, color, and optional tooltip
sizenumber120Diameter of the SVG ring in pixels
thicknessnumber12Stroke width of the ring arcs in pixels
labelReactNode—Content rendered in the center of the ring
roundCapsboolean—Applies rounded end caps to each arc segment
rootColorstring'var(--dv-color-border)'Color of the unfilled background track ring
classstring—Additional CSS class names
styleobject—Inline styles