Spark UI
Back to UI Kit

Layered Utilization

Three concentric rings tracking separate utilization metrics, each capped with a rounded arc.

Interactive Stage Preview

Customize

8 options
Accent Color
Rings
3
Ring Width
10
Centre Hole
30
Corner Radius
5
Background Track
Clockwise
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-concentric-radial-rings

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.
ringsnumber3Number of concentric utilization rings.
ringWidthnumber10Thickness of each ring in pixels.
holenumber30Size of the empty centre, as a percentage of the radius.
cornerRadiusnumber5Rounding on each ring's ends.
showTrackbooleantrueShow the faint track behind each ring.
clockwisebooleantrueFill rings clockwise; off fills anticlockwise.
speednumber100Playback speed of entry and transition animations, as a percentage.