TreemapPro
Squarified rectangles sized by value, for revenue mix, storage and market caps.
Revenue by product
When to use
- Parts of a whole with many parts: revenue by product, storage by folder.
When not to use
- A few parts: use a donut chart.
- Values over time.
Installation
Usage
Import it from @/components/ui/treemap after installing.
example.tsx
import { Treemap } from "@/components/ui/treemap";
<Treemap items={[{ id: "api", label: "API", value: 48200, change: "+18%" }]} format={(n) => `$${n}`} />API reference
Treemap
Squarified tiles sized by value, largest first.
| Prop | Type | Default | Description |
|---|---|---|---|
| items | { id; label; value; color?; change? }[] | – | Tiles. |
| height | number | 320 | Height in px. |
| format / onSelect | (n) => string / (item) => void | – | Value text and click handler. |
Keyboard interactions
| Keys | Action |
|---|---|
| Tab | Move between tiles |
| Enter | Select a tile |
Accessibility
- A list of buttons, each labelled with value, share and change.
Motion
- Tiles grow in largest first and animate to new positions when data changes; hovering dims the rest.
Responsive behavior
- Fills its width; small tiles show only their label.
Performance
- Layout is computed once per render.
Notes for AI
- Use dark, saturated colors: labels are white.
This page as Markdown, for assistants and coding agents:
/components/treemap/markdownThe full library index for assistants is at /llms.txt.
Lode222 doc pagesllms.txt