Spark UI
Back to UI Kit

Density Grid

A rounded-cell density matrix for general-purpose heat data beyond contribution-style grids.

Interactive Stage Preview

Customize

9 options
Accent Color
Rows
5
Columns
7
Cell Height
18
Cell Gap
6
Corner Radius
6
Cell Shape
Row Labels
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-dot-matrix-heatmap

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.
rowsnumber5Number of rows in the matrix.
columnsnumber7Number of cells per row.
cellHeightnumber18Height of each rounded cell in pixels.
gapnumber6Space between cells in pixels.
radiusnumber6Rounding on each cell.
shapestring'rounded'Draw cells as rounded tiles or dots.
showLabelsbooleantrueShow the day labels.
speednumber100Playback speed of entry and transition animations, as a percentage.