Spark UI
Back to UI Kit

Velocity Gauge

A 240° speed gauge with an under-damped spring needle, glowing progress arc and redline zone.

Interactive Stage Preview

Customize

7 options
Accent Color
Redline Color
Max Value
240
Major Ticks
7
Redline
80
Auto Mode
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 velocity-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'Arc and hub color.
alertColorstring (hex)'#f43f5e'Redline zone and alert color.
maxnumber240Top of the scale.
majorTicksnumber7Labelled ticks around the dial.
redlinenumber80Where the redline zone starts, as a percentage.
wanderbooleantrueEnable the Auto preset that wanders between speeds.
speednumber100Playback speed of entry and transition animations, as a percentage.