Spark UI
Back to UI Kit

Micro Trend Rows

Stacked compact sparkline rows, each with its own live-looking readout for dense dashboards.

Interactive Stage Preview

Customize

7 options
Accent Color
Rows
3
Points Per Row
5
Line Thickness
2
Live Dot
Live Updates
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-sparkline-telemetry

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.
rowsnumber3Number of telemetry rows.
pointsnumber5Samples in each sparkline.
strokeWidthnumber2Stroke width of each sparkline.
showEndDotbooleantrueMark the newest sample with a dot.
livebooleantrueShift in new readings on an interval.
speednumber100Playback speed of entry and transition animations, as a percentage.