Treemap Split

A treemap splits into category tiles, the biggest tile in gradient with a 38% label

Installation

$ pnpm dlx shadcn@latest add @remocn/treemap-split

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { TreemapSplit } from "@/components/remocn/treemap-split";
 
const TreemapSplitScene = () => (
  <TreemapSplit
    items={[
      { label: "Captions", value: 38 },
      { label: "Transitions", value: 16 },
      { label: "Text", value: 12 },
      { label: "Shaders", value: 8 },
      { label: "Icons", value: 6 },
    ]}
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="TreemapSplit"
    component={TreemapSplitScene}
    durationInFrames={175}
    fps={30}
    width={1280}
    height={720}
  />
);

A rectangle splits recursively with drawn lines into category tiles, then the highlighted tile fills with gradient, the rest dim, and its share counts up with its label. Pass items (label and value, up to ten) and optionally highlight, the index of the hero item; it defaults to the largest. Ships dark and light via theme.

Props5

Prop	Type	Default
items	TreemapItem[]DEFAULT_ITEMS Up to ten categories; tile area follows value.
highlight	number— Index in items of the hero tile; defaults to the largest.
accent	string"#3B5BFD" Accent color for the hero element.
theme	"dark" \| "light""dark" Dark or light palette.
speed	number1 Playback multiplier.

itemsTreemapItem[]
Up to ten categories; tile area follows value.
DefaultDEFAULT_ITEMS
highlightnumber
Index in items of the hero tile; defaults to the largest.
accentstring
Accent color for the hero element.
Default"#3B5BFD"
theme"dark" | "light"
Dark or light palette.
Default"dark"
speednumber
Playback multiplier.
Default1