Heat Grid
A 2-D matrix fill gauge — the cousin of ProgressBar. Cells fill from the bottom-centre outward in a widening pyramid as the value rises, with a dim-to-bright accent ramp toward the wave front. Scroll-gated fill, optional percentage readout.
Add to your project
One command adds this component to your project.
1
Run the following command. New project? Run npx shadcn@latest init first to set up Tailwind and path aliases.
npx shadcn@latest add @aicanvas/andromeda-heat-grid2
For dark mode, add the dark class to your <html> element:
<html class="dark">Props
Every prop this component accepts. Any other prop is forwarded to the underlying element.
| Prop | Type | Default | Description |
|---|---|---|---|
| value | number | 0 | 0–100 fill level (clamped). |
| cols | number | 7 | Number of columns in the cell matrix. |
| rows | number | 5 | Number of rows in the cell matrix. |
| cellSize | number | 22 | px per cell side. |
| gap | number | 3 | px between cells. |
| showValue | boolean | true | Render the accent percentage readout beside the grid. |
| unit | string | '%' | Suffix appended to the value readout. |
| label | string | - | Accessible name for the meter. |
| className | string | - | Extra class names for the root element. |
| style | React.CSSProperties | - | Inline styles merged onto the root element. |
AI Canvas