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?" Part of vizcn by vibecoding.tech — agent-first SVG viz forms, no chart libraries.
// --- 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>
)
}
Part of vizcn · by vibecoding.tech — browse the full library on 21st.dev.