DataLiquid Glass
Heatmap
Matrix heatmap with color scales, labels, legend, values, and interactive cells. Preview live, copy the source, or install with the CLI into your Next.js project.
Install
npx @intellihelper/cli@latest add heatmapHeatmap + customization
Matrix or sparse cells · primary / github / cool / warm / mono scales, legend, interactive cells.
About this component
Heatmap is part of Data. Matrix heatmap with color scales, labels, legend, values, and interactive cells.
Install with npx @intellihelper/cli@latest add heatmap. Files land in your project so you can customize styles, variants, and behavior without a locked package.
Prefer AI-assisted install? Use the agent plugin or the MCP server.
When to use Heatmap
Use when
- Use Heatmap when matrix heatmap with color scales, labels, legend, values, and interactive cells.
- Tabular data, empty states, skeletons, and loading placeholders.
- Dense operational UIs where scanability matters.
Avoid when
- Narrative content better as cards or markdown.
- Tiny datasets that fit a simple list without table semantics.
Accessibility notes
- Tables need proper headers; empty states should explain next actions.
- Skeletons should be supplemented with aria-busy on the live region.
Interactive primitives build on accessible patterns (including Radix where applicable). Always verify focus order and contrast on your mesh or product background.
Composition tips
- Show empty states with a clear primary action (e.g. add first item).
- Prefer progressive loading over layout shifts (reserve row height).