Spark UI
Back to UI Kit

Orbit Segments

A donut whose segments slide outward on hover while the centre figure springs to the hovered value.

Interactive Stage Preview

Customize

8 options
Accent Color
Segments
5
Ring Thickness
28
Segment Gap
3
Hover Lift
9
Orbit Ring
Legend
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 orbit-segments

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.
segmentsnumber5Number of donut slices.
thicknessnumber28Width of the donut ring.
gapnumber3Gap between slices, in degrees.
liftnumber9How far a hovered slice slides outward.
showOrbitbooleantrueShow the slowly rotating dashed ring.
showLegendbooleantrueShow the side legend.
speednumber100Playback speed of entry and transition animations, as a percentage.