Skip to content
MIZU.

SIG—06 Signature system

Treemap

A hierarchy by size that you enter like a place: squarified blocks, a camera that moves inside, nested previews, heat and a path back out.

Live — this one is real

Scenario

Illustrative data. Open a block to move inside it; the path leads back. Arrow keys travel between neighbouring blocks. Heat shows growth since the last release.

437 KB

Choose a block to open it

Arrow keys move between neighbouring blocks. Enter opens a block, Backspace returns to the level above.

Usage

tsx
import { Treemap } from "mizu-ui";

export function Example() {
  return (
    <Treemap
      label="Storage"
      format={(v) => `${v} GB`}
      data={{
        id: "all",
        label: "All",
        children: [
          {
            id: "media",
            label: "Media",
            children: [
              { id: "video", label: "Video", value: 420 },
              { id: "photos", label: "Photos", value: 180 },
            ],
          },
          { id: "backups", label: "Backups", value: 240 },
          { id: "docs", label: "Documents", value: 96 },
        ],
      }}
    />
  );
}

This code, running — no configuration beyond the data

936 GB

Choose a block to open it

Arrow keys move between neighbouring blocks. Enter opens a block, Backspace returns to the level above.

Keyboard

←→↑↓
Move to the neighbouring block
Enter
Open a block, or choose a leaf
BackspaceEsc
Return to the level above

Source & setup

Add this component to your project with the shadcn CLI. The command copies its source and styles into your configured UI directory.

sh
npx shadcn@latest add 0xuser64bit/mizu/treemap

For npm imports, import mizu-ui/styles.css once. Fonts are optional via mizu-ui/fonts.css. Override --mizu-* tokens or use className for local styling. Requires React and Motion.

Inspect signature/Treemap.tsx

Source is included in the npm package under src/signature/Treemap.tsx.

Open full source ↗

Props

PropTypeDefaultDescription
label / datastring / TreemapNode—Accessible name and root. Nodes have id, label, value (leaves), children, tone and detail.
format(value: number) => string—Value formatting for blocks, path and readout.
path / defaultPath / onPathChangestring[]—Ids from the root's child to the opened node.
onSelect(node, path) => void—A leaf was chosen.
heat(node) => number | undefined—0–1 intensity mixed into a block, e.g. growth or error rate.
heightnumber440Stage height in pixels.
squarify(items, box)function—The layout itself, for custom renderers.

Accessibility

Blocks are buttons named with their value, share of the level and contents. Arrow keys move to the nearest block in that direction; Enter opens a branch or chooses a leaf, Backspace returns. The path is a navigation list with the current level marked; openings are announced and focus lands on the largest block inside.

Motion

Opening a block is a camera move: it grows to fill the stage while its neighbours fly outward and the next level resolves inside it. Returning plays the same path in reverse. Only geometry animates, so text never distorts. Reduced motion changes level instantly.

Works alongside

ChronicleTrendChartWaveformPlane