Spark UI
Back to UI Kit

Allocation Ring

A donut chart with generous segment spacing, rounded arc caps, and a live centre value on hover.

Interactive Stage Preview

Customize

7 options
Accent Color
Segments
4
Ring Thickness
22
Segment Gap
6
Corner Radius
8
Legend
Animation Speed
100

Get this component

Copies the component into your project, installs what it needs, and pulls down its images. Nothing to download by hand.

npx spark-ui-registry@latest add mono-rounded-donut-ring

Writes to components/spark-ui/ by default; override with --dir. The file is yours to edit; there is no package to keep in sync.

Or let an AI agent pull it in for you. Set up the MCP server
PropertyTypeDefaultDescription
theme'dark' | 'light''dark'Colour scheme of the card.
compactbooleanfalseShrinks the card to a smaller fixed height.
colorstring (hex)'#ff8a3d'Primary series color.
segmentsnumber4Number of slices in the ring.
thicknessnumber22Width of the ring in pixels.
gapnumber6Angle of empty space between slices.
cornerRadiusnumber8Rounding on each slice's ends.
showLegendbooleantrueShow the segment legend below the ring.
speednumber100Playback speed of entry and transition animations, as a percentage.