Treemap

Component 15

About

Want this built into your product? AI agents write the code, an engineer directs them: https://vibecoding.tech/services?utm_source=21st&utm_medium=component Book a call and say promo code 21ST to get a free 3-day development trial. Flat slice-and-dice treemap in N rows — tile area is proportional to each item's share of the total; tiles carry label, value, optional icon, badge, and link. Answers: "How is the whole split up, and who dominates?"

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Treemap to your project and fits it to your theme.

Code

How Treemap is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

// --- vizcn palette (lib/palette.ts inlined for 21st.dev; canonical registry: https://vibecoding.tech/vizcn) ---
const CATEGORICAL = [
  '#4E79A7', // blue
  '#F28E2B', // orange
  '#59A14F', // green
  '#B07AA1', // purple
  '#76B7B2', // teal
  '#E15759', // red
  '#EDC948', // yellow
  '#FF9DA7', // pink
  '#9C755F', // brown
  '#BAB0AC', // grey
] as const
function seriesColor(i: number): string {
  return CATEGORICAL[((i % CATEGORICAL.length) + CATEGORICAL.length) % CATEGORICAL.length]
}
// --- end palette ---
import { Treemap } from '@/components/ui/treemap'

const VENDOR = {
  meridian: seriesColor(0),
  helix: seriesColor(1),
  vantage: seriesColor(2),
}

export default function TreemapDemo() {
  return (
    <div className="mx-auto max-w-[640px]">
      <p className="mb-2 text-[13px] font-bold text-[var(--vz-ink,#111)]">Assistant usage share, Jun 2026</p>
      <Treemap
        rows={2}
        rowHeight={104}
        items={[
          {
            label: 'Atlas',
            value: 34,
            valueLabel: '34%',
            sub: 'Meridian',
            badge: 'npm 12.4M/wk',
            color: VENDOR.meridian,
          },
          {
            label: 'Nova',
            value: 26,
            valueLabel: '26%',
            sub: 'Helix Labs',
            badge: 'npm 8.1M/wk',
            color: VENDOR.helix,
          },
          {
            label: 'Orion',
            value: 18,
            valueLabel: '18%',
            sub: 'Vantage',
            badge: 'npm 4.9M/wk',
            color: VENDOR.vantage,
          },
          {
            label: 'Vega',
            value: 12,
            valueLabel: '12%',
            sub: 'Meridian',
            color: VENDOR.meridian,
          },
          {
            label: 'Lumen',
            value: 7,
            valueLabel: '7%',
            sub: 'Helix Labs',
            color: VENDOR.helix,
          },
          { label: 'Others', value: 3, valueLabel: '3%', sub: 'long tail', muted: true },
        ]}
      />
      <p className="mt-2 text-[10.5px] font-medium uppercase tracking-[0.08em] text-[var(--vz-muted,#8A8A8A)]">
        area = share of total · color = vendor · brighter = bigger
      </p>
    </div>
  )
}