Treemap

Parts of a whole as rectangles sized by value, with groups you can zoom into.

$ pnpm dlx shadcn@latest add https://dashral.com/r/treemap.json

Backups: 72 GB (12.1%)
System: 30 GB (5.1%)

Installation

$ pnpm dlx shadcn@latest add https://dashral.com/r/treemap.json

Adds the component, the components it builds on, its npm packages and the theme tokens it uses. Using Dashral often? Add the registry to components.json once:

components.json

1{
2  "registries": {
3    "@dashral": "https://dashral.com/r/{name}.json"
4  }
5}

Then add components by name:

$ pnpm dlx shadcn@latest add @dashral/treemap

Usage

example.tsx

1import { Treemap } from "@/components/dashral/treemap"
2
3<Treemap
4  data={[
5    {
6      label: "Marketing",
7      children: [
8        { label: "Ads", value: 420 },
9        { label: "Events", value: 180 },
10      ],
11    },
12    { label: "Engineering", value: 960 },
13  ]}
14  formatOptions={{ style: "currency", currency: "USD" }}
15  aria-label="Spend by team"
16/>

Examples

Flat, as currency

Without children every tile is a value; formatOptions writes them.

Laptops: $48,200 (38.4%)
Phones: $39,100 (31.2%)
Headphones: $14,800 (11.8%)
Monitors: $12,400 (9.9%)
Keyboards: $6,900 (5.5%)
Cables: $2,300 (1.8%)
Cases: $1,800 (1.4%)

Budget by department

Click a department to see where its money goes; the year switch eases every tile to its new size.

Budget 2026

$5.2M across 4 departments

API reference

Treemap

Also takes every prop of <div>(opens in a new tab).

Prop	Type	Default
`data`	`{ label: string; value?: number; color?: string; children? }[]` The tiles; one with children is a group (its value is theirs added up). Colors default to --chart-1 … --chart-5, and children take their group's. Required.	—
`height`	`number` In pixels; the width fills the container.	`280`
`rootLabel`	`string` The top level's name in the trail.	`"All"`
`showHeader`	`boolean` The trail with the total, and the hovered tile's value and share.	`true`
`locale / formatOptions`	`string / Intl.NumberFormatOptions` How values are written.	`LocaleProvider's`
`aria-label`	`string` What the chart shows.	`"Treemap"`
`classNames`	`{ header, tile, label, value }` Classes for each part.	—
`className`	`string` Extra classes, merged with cn() so yours win.	—

Keyboard

Keys	Action
`Tab`	Move between groups
`Enter`or`Space`	Zoom into the focused group
`Escape`	Zoom out a level

Accessibility

Every tile carries its label, value and share as text, also when it's too small to show them; groups are buttons that say they zoom in.
The trail is a nav with the current level marked; zooming in moves focus to it, zooming out back to the group you left.
Tiles are tinted, with the text in the theme's foreground, so labels keep their contrast whatever the color.

Motion

Tiles grow from their middle when it first shows. Zooming in grows a group's items out of where they sat inside it; zooming out shrinks it back (--duration-considered). When values change, tiles slide to their new size instead of starting over. Instant with reduced motion.