Spark UI
Back to UI Kit

Live Signal

A real-time streaming line that scrolls continuously, with a pulsing head, threshold band and alert state.

Interactive Stage Preview

Customize

8 options
Accent Color
Alert Color
Visible Samples
40
Tick Interval
900
Volatility
22
Threshold
72
Threshold Band
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 live-signal

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'Trace color.
alertColorstring (hex)'#f43f5e'Threshold band and alert color.
pointsnumber40Samples visible at once.
intervalnumber900Milliseconds between samples.
volatilitynumber22How jumpy the signal is.
thresholdnumber72Alert limit.
showThresholdbooleantrueShow the alert band.
speednumber100Playback speed of entry and transition animations, as a percentage.