Tree Map | Zyeon UI

Preview in your theme

Bundle analysis · maxDepth={2}, formatValue={formatBytes} — click a folder's label strip along its top edge to drill into it (its body belongs to the child tiles), then use the breadcrumb to come back. Clicking a file tile pins it in the readout; ← → ↑ ↓ move between siblings, Backspace goes up one level.

onNavigate: dist/ · onSelect: nothing picked yet

Extreme long tail · one dependency is 95% of the bundle. Shade follows sibling rank rather than raw share, so the seven survivors stay distinguishable instead of all collapsing to the palest step; tiles too small for text keep their tooltip and aria-label.

Four data levels, maxDepth={2} · region → bucket → prefix → storage class. Only the first two levels are nested, so the buckets are the deepest tiles: the ones that still have prefixes inside carry a chevron and drill in on click.

Same four levels, maxDepth={3} · one more level is drawn in place, so the buckets open in place and their prefixes (video / images / postgres) become the folded tiles instead.

Zero, negative and NaN values · Travel (0), Legal (−4,000), Swag (NaN) and the all-zero 'Frozen programs' branch are dropped, so only three tiles remain and the total is the sum of what is actually drawn.

Single node · a root with no children still tiles as one full-bleed block at 100%.

Empty · nothing survives the positive-value filter, so the map falls back to emptyLabel.

Nothing to map yet

Narrow container · 300px wide with maxDepth={1}, the flat mode: labels drop out below 44px of tile width and the tooltip carries the value instead.

Loading preview…

This component is part of Pro

The install command, prompt and concept map are included with a Pro license — one purchase unlocks every Pro component, forever.

Unlock with Pro