Treemap
A squarified treemap: area by size, tap a group to drill in, breadcrumb back out, labels hide when tiles are tiny.
treemap.tsxtreemap.css
Checking access…
Overview
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.
When to use
- Disk and bundle analysis, budgets, portfolio weights.
When not to use
- Comparing similar-sized items precisely: use bars.
Installation
$
pnpm dlx shadcn@latest add https://sundaeui.dev/r/treemap.json$
npx shadcn@latest add https://sundaeui.dev/r/treemap.json$
yarn dlx shadcn@latest add https://sundaeui.dev/r/treemap.json$
bunx --bun shadcn@latest add https://sundaeui.dev/r/treemap.jsonWorks in any React project. Files are written to components/sundae/. Read the source in the stage’s Code view. Pro assets need a personal token. See authenticated installs.
- No dependencies beyond React 18 or later.
- Copy treemap.tsx and treemap.css into components/sundae/.
- The CSS file is imported by the component, so no extra configuration is needed.
- Import the component and use it as shown below.
Usage
import { Treemap } from '@/components/sundae/treemap'
<Treemap />Props
| Prop | Type | Default |
|---|---|---|
data*Tree. | { name: string; value?: number; children?: Node[] } | — |
formatValue formatter. | (n: number) => string | — |
fillSurface: dark or light. | 'dark' | 'light' | 'dark' |
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.
Customization
- Colours are CSS custom properties on .sd-trm; override them in your own stylesheet.
- fill="light" switches the built-in light palette.
FAQ
- Is Treemap free?
- Treemap is part of Sundae Pro. The live preview is open to everyone; the source installs with a Pro account.
- How do I install Treemap?
- Run npx shadcn@latest add https://sundaeui.dev/r/treemap.json. The files are written to components/sundae/. It has no dependencies beyond React 18 or later.
- Does Treemap support keyboard and screen readers?
- 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.
- Does Treemap respect reduced motion?
- Reduced motion removes the movement and keeps every state change.
More like this
All data →Stacked Bars
Data · Refined- Pro
Scrub Sparkline
Data · Refined - Pro
Tick Gauge
Data · Refined - Pro
Donut Breakdown
Data · Refined Savings Goal
Data · Refined- Pro
Storage Bar
Data · Refined