Spark UI
Back to UI Kit

Hour Dial

A 24-hour radial bar clock with a rotating sweep hand, glowing peak bar and weekday/weekend morph.

Interactive Stage Preview

Customize

6 options
Accent Color
Bars
24
Hub Radius
38
Bar Width
60
Sweep Hand
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 hour-dial

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'Bar and sweep color.
barsnumber24Number of radial bars.
innerRadiusnumber38Radius of the empty centre.
barWidthnumber60Bar thickness as a share of its slot.
showSweepbooleantrueShow the rotating sweep.
speednumber100Playback speed of entry and transition animations, as a percentage.