Spark UI
Back to UI Kit

Score Dial

A 240-degree arc gauge with a rounded stroke endcap and a centred score readout.

Interactive Stage Preview

Customize

7 options
Accent Color
Value
84
Arc Thickness
18
Arc Sweep
240
Status Label
Tick Marks
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-speedometer-gauge-arc

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.
valuenumber84Score the dial fills to.
thicknessnumber18Width of the dial arc in pixels.
sweepnumber240Total angle covered by the dial, in degrees.
statusstring'Target Met'Caption under the score.
showTicksbooleantrueShow the segmented tick ring around the dial.
speednumber100Playback speed of entry and transition animations, as a percentage.