Spark UI
Back to UI Kit

Node Cluster Map

A bubble scatter where circle size encodes a third dimension, scaled non-linearly for legibility.

Interactive Stage Preview

Customize

7 options
Accent Color
Bubbles
4
Min Bubble Size
100
Max Bubble Size
500
Fill Strength
20
Outline Width
2
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-bubble-clusters

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.
bubblesnumber4Number of clusters plotted.
minSizenumber100Area of the smallest bubble.
maxSizenumber500Area of the largest bubble.
fillOpacitynumber20Opacity of each bubble's fill, in percent.
strokeWidthnumber2Stroke width of each bubble outline.
speednumber100Playback speed of entry and transition animations, as a percentage.