Spark UI
Back to UI Kit

Dot Allocation

A dot-matrix allocation grid where a diagonal colour wave sweeps the dots whenever the period changes.

Interactive Stage Preview

Customize

6 options
Accent Color
Categories
4
Columns
20
Rows
5
Dot Shape
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 dot-allocation

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'Base color; categories use its shades.
categoriesnumber4Number of allocation categories.
columnsnumber20Dots per row.
rowsnumber5Rows of dots.
shapestring'circle'Shape of each dot.
speednumber100Playback speed of entry and transition animations, as a percentage.