Spark UI
Back to UI Kit

Node Distribution

A scatter plot of rounded nodes across two axes, with exact coordinates surfaced on hover.

Interactive Stage Preview

Customize

7 options
Accent Color
Nodes
6
Min Node Size
60
Max Node Size
240
Node Opacity
100
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 mono-scatter-matrix

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.
nodesnumber6Number of points plotted.
minSizenumber60Area of the smallest node.
maxSizenumber240Area of the largest node.
opacitynumber100Fill opacity of every node, in percent.
showGridbooleantrueShow the dashed background grid.
speednumber100Playback speed of entry and transition animations, as a percentage.