Heatmap

Two-axis intensity grid for compact activity and density summaries.

Heatmap should use one accent scale with restrained contrast. Use it when relative density matters more than exact values.

ready

MonTueWedThuFriAM1220283644Mid1725334149PM2230386454

Playground

Props in the URL.

Controls update query params directly. Complex slots use curated fixtures so component states stay deterministic, linkable, and screenshot-ready.

Loading playground.

States

Every state maps to the same component render route through the `state` query param.

ready

MonTueWedThuFriAM1220283644Mid1725334149PM2230386454

Default

Labeled intensity grid with values.

ready

MonTueWedThuFriAMMidPM

Quiet

Values hidden for denser overview cards.

ready

MonTueWedThuFriAM1220283644Mid1725334149PM2230386454

Sunken

Sunken plot surface for dashboard wells.

Props

Name	Type	Default	Description
`title *`	`string`	-	Chart title.
`description`	`string`	-	Muted supporting copy.
`cells`	`readonly HeatmapCell[]`	`[]`	Two-axis intensity cells.
`showValues`	`boolean`	`true`	Shows cell values.
`state`	`'ready' \| 'loading' \| 'empty' \| 'error'`	`ready`	Async data state.
`height`	`number`	`220`	Grid stage height.
`surface`	`'raised' \| 'sunken' \| 'transparent'`	`raised`	Grid stage surface.