caliper uidocs
DemoSign inGet Pro

Treemap

Free

Nested rectangles sized by value, with drill-down.

Installs components/ui/treemap.tsxDepends on d3-shapeMotion none in component source
pnpm dlx shadcn@latest add https://caliperui.site/r/treemap.json
Storage by team

Storage by team
ItemGroupValueShare
Figma filesDesign4223.9%
ExportsDesign1810.2%
BuildsEngineering6436.4%
LogsEngineering3017.0%
OperationsAll2212.5%

When to use #

Use it for

  • Showing parts of a whole across two levels.
  • Many categories where a pie would be unreadable.

Skip it when

  • Precise comparison of similar values.

Installation #

terminal
pnpm dlx shadcn@latest add https://caliperui.site/r/treemap.json

Adds its 3 files to components/ui/, each with its own stylesheet, and installs their packages. No account needed. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage #

This is the code behind the preview above. It is built from Treemap and layoutTreemap.

example.tsx
import { Treemap } from "@/components/ui/treemap"

export function StorageTreemap() {
  return (
    <div className="w-full max-w-xl">
      <Treemap
        label="Storage by team"
        unit="GB"
        data={[
          { id: "design", label: "Design", children: [{ id: "d1", label: "Figma files", value: 42 }, { id: "d2", label: "Exports", value: 18 }] },
          { id: "eng", label: "Engineering", children: [{ id: "e1", label: "Builds", value: 64 }, { id: "e2", label: "Logs", value: 30 }] },
          { id: "ops", label: "Operations", value: 22 },
        ]}
      />
    </div>
  );
}

API reference #

Treemap

component
PropTypeDefaultDescription
label *string—
data *readonly TreemapNode[]—
rootLabelstring"All"
unitstring""
formatValue((value: number) => string)numberText
onSelect((node: TreemapNode, trail: readonly string[]) => void)—Called when a leaf is chosen, with the groups that contain it.
loadingboolean—
errorstring—
classNamestring—

layoutTreemap

component

No props of its own; it accepts the native props of its root element.

Accessibility #

It exposes group and status semantics, with aria-label, aria-busy, aria-hidden, aria-current and aria-pressed kept in step with state. Changes that matter are announced through a live region.

KeyBehaviour
EscapeCloses or cancels, then returns focus to where it came from.
BackspaceRemoves the previous character or item.
HomeJumps to the first item or the minimum.
EndJumps to the last item or the maximum.
→Moves to the next item or value.
←Moves to the previous item or value.
↓Moves to the next item or value.
↑Moves to the previous item or value.

Motion #

It declares no animation in its component source. Any transition comes from its stylesheet, which uses the duration tokens that collapse to instant under prefers-reduced-motion.