# Treemap

> Squarified rectangles sized by value, for revenue mix, storage and market caps.

Component · Pro · https://lodeui.com/components/treemap

## 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

```bash
npx shadcn@latest add @lode/treemap
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion

## Usage

```tsx title="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.

## Related

- [Donut chart](https://lodeui.com/components/donut-chart) — Proportions as arcs that morph when the data changes.
- [Bar chart](https://lodeui.com/components/bar-chart) — Bars that grow in and morph between datasets, with a hover readout.
- [Expense tracker](https://lodeui.com/blocks/expense-tracker) — Spending by category, budget bars that warn, quick add and recent expenses.