Spark UI
Back to UI Kit

Scrub Timeline

A smooth line that draws itself in, with a spring-tracked crosshair and tooltip that snap to the nearest point.

Interactive Stage Preview

Customize

7 options
Accent Color
Data Points
7
Line Thickness
2.5
Smooth Curve
Area Fill
Grid Lines
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 scrub-timeline

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.
pointsnumber7Number of points along the timeline.
strokeWidthnumber2.5Stroke width of the line.
smoothbooleantrueUse a spline curve; off draws straight segments.
showAreabooleantrueFill the area under the line with a gradient.
showGridbooleantrueShow the dashed horizontal guides.
speednumber100Playback speed of entry and transition animations, as a percentage.