Heat Grid

Displays a single bounded reading as a matrix of cells that fill as it rises.

Fill60%

Configurations

Supported configurations for this component.

6 examples

Live

Fill60%

Low

Mid

High

Dense

No readout

One command adds this component to your project.

Run the following command. New project? Run npx shadcn@latest init first to set up Tailwind and path aliases.

npx shadcn@latest add @aicanvas/••••••••••••

Light and dark both come with the install and follow the dark class on <html>, the shadcn dark mode setup (next-themes with attribute="class").

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 brand 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.

Displays a status message in the flow of the page, at a severity from note to fault.

Represents a person as a square image tile that falls back to their initials.

Displays the state a row or cell reports, such as online, queued, or fault.