Treemap
A squarified treemap: click to drill and the tiles grow to fill the view, with a breadcrumb back and metrics that morph every tile.
pnpm dlx shadcn@latest add @uiarc/treemapLive · keyboard ready
Book of business
Team$4.0M
Business$7.0M
Enterprise$7.4M
United States$18.4M
Team$517K
Business$893K
Enterprise$940K
Canada$2.4M
Team$134K
Business$232K
Enterprise$244K
Mexico$610K
North America$21.4M
Team$906K
Business$1.6M
Enterprise$1.6M
Germany$4.1M
Team$849K
Business$1.5M
Enterprise$1.5M
United Kingdom$3.9M
Team$493K
Business$851K
Enterprise$896K
France$2.2M
Team$288K
Business$498K
Enterprise$524K
Netherlands$1.3M
Team$348K
Business$600K
Enterprise$632K
Nordics$1.6M
Team$196K
Business$338K
Enterprise$356K
Spain$890K
Europe$14.0M
Team$607K
Business$1.0M
Enterprise$1.1M
Japan$2.8M
Team$372K
Business$642K
Enterprise$676K
Australia$1.7M
Team$216K
Business$372K
Enterprise$392K
India$980K
Team$158K
Business$274K
Enterprise$288K
Singapore$720K
Team$185K
Business$319K
Enterprise$336K
South Korea$840K
Asia Pacific$7.0M
Team$273K
Business$471K
Enterprise$496K
Brazil$1.2M
Team$73K
Business$125K
Enterprise$132K
Chile$330K
Team$64K
Business$110K
Enterprise$116K
Colombia$290K
Team$57K
Business$99K
Enterprise$104K
Argentina$260K
Latin America$2.1M
All regions, $44.5M
| Path | Value | Share of parent | Growth |
|---|---|---|---|
| North America / United States / Team | $4.0M | 22% | +20% |
| North America / United States / Business | $7.0M | 38% | +25% |
| North America / United States / Enterprise | $7.4M | 40% | +30% |
| North America / United States | $18.4M | 86.1% | +26% |
| North America / Canada / Team | $517K | 22% | +15% |
| North America / Canada / Business | $893K | 38% | +20% |
| North America / Canada / Enterprise | $940K | 40% | +25% |
| North America / Canada | $2.4M | 11% | +21% |
| North America / Mexico / Team | $134K | 22% | +37% |
| North America / Mexico / Business | $232K | 38% | +42% |
| North America / Mexico / Enterprise | $244K | 40% | +47% |
| North America / Mexico | $610K | 2.9% | +43% |
| North America | $21.4M | 48% | +26% |
| Europe / Germany / Team | $906K | 22% | +24% |
| Europe / Germany / Business | $1.6M | 38% | +29% |
| Europe / Germany / Enterprise | $1.6M | 40% | +34% |
| Europe / Germany | $4.1M | 29.4% | +30% |
| Europe / United Kingdom / Team | $849K | 22% | +13% |
| Europe / United Kingdom / Business | $1.5M | 38% | +18% |
| Europe / United Kingdom / Enterprise | $1.5M | 40% | +23% |
| Europe / United Kingdom | $3.9M | 27.6% | +19% |
| Europe / France / Team | $493K | 22% | +18% |
| Europe / France / Business | $851K | 38% | +23% |
| Europe / France / Enterprise | $896K | 40% | +28% |
| Europe / France | $2.2M | 16% | +24% |
| Europe / Netherlands / Team | $288K | 22% | +27% |
| Europe / Netherlands / Business | $498K | 38% | +32% |
| Europe / Netherlands / Enterprise | $524K | 40% | +37% |
| Europe / Netherlands | $1.3M | 9.4% | +33% |
| Europe / Nordics / Team | $348K | 22% | +22% |
| Europe / Nordics / Business | $600K | 38% | +27% |
| Europe / Nordics / Enterprise | $632K | 40% | +32% |
| Europe / Nordics | $1.6M | 11.3% | +28% |
| Europe / Spain / Team | $196K | 22% | +32% |
| Europe / Spain / Business | $338K | 38% | +37% |
| Europe / Spain / Enterprise | $356K | 40% | +42% |
| Europe / Spain | $890K | 6.4% | +38% |
| Europe | $14.0M | 31.5% | +26% |
| Asia Pacific / Japan / Team | $607K | 22% | +29% |
| Asia Pacific / Japan / Business | $1.0M | 38% | +34% |
| Asia Pacific / Japan / Enterprise | $1.1M | 40% | +39% |
| Asia Pacific / Japan | $2.8M | 39.5% | +35% |
| Asia Pacific / Australia / Team | $372K | 22% | +17% |
| Asia Pacific / Australia / Business | $642K | 38% | +22% |
| Asia Pacific / Australia / Enterprise | $676K | 40% | +27% |
| Asia Pacific / Australia | $1.7M | 24.2% | +23% |
| Asia Pacific / India / Team | $216K | 22% | +54% |
| Asia Pacific / India / Business | $372K | 38% | +59% |
| Asia Pacific / India / Enterprise | $392K | 40% | +64% |
| Asia Pacific / India | $980K | 14% | +60% |
| Asia Pacific / Singapore / Team | $158K | 22% | +25% |
| Asia Pacific / Singapore / Business | $274K | 38% | +30% |
| Asia Pacific / Singapore / Enterprise | $288K | 40% | +35% |
| Asia Pacific / Singapore | $720K | 10.3% | +31% |
| Asia Pacific / South Korea / Team | $185K | 22% | +41% |
| Asia Pacific / South Korea / Business | $319K | 38% | +46% |
| Asia Pacific / South Korea / Enterprise | $336K | 40% | +51% |
| Asia Pacific / South Korea | $840K | 12% | +47% |
| Asia Pacific | $7.0M | 15.7% | +37% |
| Latin America / Brazil / Team | $273K | 22% | +45% |
| Latin America / Brazil / Business | $471K | 38% | +50% |
| Latin America / Brazil / Enterprise | $496K | 40% | +55% |
| Latin America / Brazil | $1.2M | 58.5% | +51% |
| Latin America / Chile / Team | $73K | 22% | +23% |
| Latin America / Chile / Business | $125K | 38% | +28% |
| Latin America / Chile / Enterprise | $132K | 40% | +33% |
| Latin America / Chile | $330K | 15.6% | +29% |
| Latin America / Colombia / Team | $64K | 22% | +48% |
| Latin America / Colombia / Business | $110K | 38% | +53% |
| Latin America / Colombia / Enterprise | $116K | 40% | +58% |
| Latin America / Colombia | $290K | 13.7% | +54% |
| Latin America / Argentina / Team | $57K | 22% | +8% |
| Latin America / Argentina / Business | $99K | 38% | +13% |
| Latin America / Argentina / Enterprise | $104K | 40% | +18% |
| Latin America / Argentina | $260K | 12.3% | +14% |
| Latin America | $2.1M | 4.8% | +43% |
- Many parts where the biggest ones matter and people drill for detail.
- Showing size and a second measure at once.
- Use bar-chart when exact comparisons between similar values matter.
- Use sunburst when the depth of the hierarchy is the story.
Installation
Add Treemap with the shadcn CLI, or copy the source by hand.
pnpm dlx shadcn@latest add @uiarc/treemapAdds the component and its local dependencies, and installs motion. First time? Add the @uiarc registry to components.json, or use the full URL:
example.tsx
import { Treemap } from "@/registry/components/treemap/treemap"; const data = { id: "all", label: "All regions", children: [ { id: "na", label: "North America", children: [{ id: "us", label: "United States", value: 18400, color: 24 }, { id: "ca", label: "Canada", value: 2350, color: 19 }] }, { id: "eu", label: "Europe", children: [{ id: "de", label: "Germany", value: 4120, color: 28 }] }, ],}; export function Revenue() { return <Treemap data={data} label="ARR" colorLabel="Growth" formatColor={value => `+${value}%`} />;}Treemap
A squarified treemap of a hierarchy. Click a branch and its tile grows to fill the view while its children open inside; the breadcrumb zooms back out. Switching the size or shading measure morphs every tile.
PropTypeDefaultDescription
dataRequiredTreemapNode–The root: { id, label, value?, color?, children? }. A branch's value is the sum of its children.labelRequiredstring–What the whole is. Names the chart for assistive technology.formatValue(value: number) => string–Formats sizes on tiles, the total, and the tooltip.colorLabelstring–Names the shading measure, such as "Growth". Tiles take the hue of their top level branch and deepen with the measure. Leave it out for one depth.formatColor(value: number) => string–Formats the shading measure.colorDomain[number, number]–Range of the shading measure. Defaults to the range of the leaves.focusstring–Controlled id of the node that fills the view.defaultFocusstring–Initial focus when uncontrolled. Defaults to the root.onFocusChange(id: string) => void–Called when people drill in or out.heightnumber420Height of the tiles in pixels.emptyLabelstring"No data yet"Shown when every value is zero.classNamestring–Extra class on the root figure.- Arrow keys
- Move to the nearest top level tile in that direction.
- HomeorEnd
- Move to the first or last tile.
- EnterorSpace
- Zooms into the tile in focus.
- EscapeorBackspace
- Zooms out one level.
- The tiles form a focusable group with a description of its keys; the breadcrumb is a nav with aria-current on the current level.
- The tile in focus is announced with its path, value, share of parent, and shading measure through a polite live region.
- A visually hidden table lists every node's path, value, share, and measure.
- Drilling in carries every tile through one affine zoom: the chosen tile grows to fill the view, its siblings fly outward, and its children open inside it.
- Zooming out reverses the same path, so each level shrinks back into the tile it came from.
- Changing a measure re-lays out the same ids, so tiles resize and recolor in place; totals roll and breadcrumbs slide.
- Text never scales: tiles are sized each frame and labels appear only where they fit. Reduced motion places tiles immediately.
- The layout squarifies to the measured width, so tiles stay close to square on any screen; headers and labels hide where they would not fit.
- Tap a tile to read it, tap a branch to drill in.
- Layouts are computed per focus; animation interpolates rects and writes transforms and sizes directly. Comfortable up to a few hundred nodes.
Notes for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Choose it for part-to-whole across a hierarchy with many leaves, such as revenue by region, country, and plan.
- Give nodes stable ids so switching the size measure morphs rather than rebuilds.
- The shading measure should be a magnitude (growth, margin), not identity; identity comes from the top level hue.
- Colors come from the shared --series-1 to --series-4 tokens in foundation.css: series 1 is the accent itself and series 2 to 4 rotate its hue, validated all-pairs for color vision deficiency across every accent in light and dark. Override the tokens on any ancestor to rebrand.
The full library index for assistants is at /llms.txt.