Spark UI
Back to UI Kit

Pulse Radar

A radar web that morphs between two datasets, with a rotating sweep and pulsing vertex rings.

Interactive Stage Preview

Customize

8 options
Accent Color
Axes
6
Fill Strength
22
Line Thickness
2
Sweep Duration
6
Radar Sweep
Vertex Pulses
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 pulse-radar

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.
axesnumber6Number of spokes on the radar.
fillOpacitynumber22Opacity of the polygon fill, in percent.
strokeWidthnumber2Stroke width of the polygon.
sweepDurationnumber6Seconds for the radar sweep to complete one turn.
showSweepbooleantrueShow the rotating sweep sector.
showPulsebooleantrueEmit pulsing rings from each vertex.
speednumber100Playback speed of entry and transition animations, as a percentage.