## Treemap (S—298)

A squarified treemap: area by size, tap a group to drill in, breadcrumb back out, labels hide when tiles are tiny.

- URL: https://sundaeui.dev/components/treemap
- Category: Cards & data visualization · Art direction: Refined
- Access: Sundae Pro (authenticated install)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/treemap.json`
- Tags: drill-down, hierarchy, budget, treemap, chart, storage

Tiles are laid out with the squarify algorithm so they stay close to square. Groups are shaded by depth in the monochrome ramp.
Tapping a group zooms into its children; the breadcrumb returns to the parent. Tiles too small for text keep a title for hover.

### Usage

```tsx
import { Treemap } from '@/components/sundae/treemap'

<Treemap />
```

### Props

- `data` (`{ name: string; value?: number; children?: Node[] }`, required): Tree.
- `format` (`(n: number) => string`): Value formatter.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Disk and bundle analysis, budgets, portfolio weights.

### When not to use

- Comparing similar-sized items precisely: use bars.

### Accessibility

- Tiles are buttons with name, value and share; groups say they can be opened.
- Breadcrumb is a nav with aria-current on the current level.
- Reduced motion removes the movement and keeps every state change.