Spark UI
Back to UI Kit

Half-Ring Indicator

A single semi-circle arc gauge with a rounded endcap and a short status readout at centre.

Interactive Stage Preview

Customize

7 options
Accent Color
Value
78
Arc Thickness
18
Segments
1
Status Label
Needle
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-arc-meter-gauge

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.
valuenumber78Level the meter fills to.
thicknessnumber18Width of the meter arc in pixels.
segmentsnumber1Split the arc into notches that light up in order; 1 is a continuous arc.
statusstring'Optimal Load'Caption under the value.
showNeedlebooleantrueShow a needle that sweeps to the value.
speednumber100Playback speed of entry and transition animations, as a percentage.