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.

View .md

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
"use client";

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 },
        ],
      }}
    />
  );
}

It starts with "use client" because it keeps state or passes functions to components, so it pastes into a Next.js page as it is. Other React setups ignore the directive.

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 into your configured UI directory, with base.css, Mizu’s tokens, and the stylesheets that hold its rules. Each rule lives in one stylesheet, so components you add together never repeat CSS. In a project without a components.json, run npx shadcn@latest init 0xuser64bit/mizu/preset first: plain init installs shadcn’s theme into your global CSS. Then load the fonts.

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

Every component imports from its own path, its name in kebab case. To paste the example, replace its mizu-ui import with:

tsx
import { Treemap } from "@/components/ui/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. A Client Component: its source starts with “use client”.

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