Shadcn.io is not affiliated with official shadcn/ui
Stats Treemap Card
A treemap stats card for React and Next.js with Recharts Treemap rendering proportional rectangles for category distribution, chart-token colored cells, inside labels with values, NumberFlow animated total, and a compact legend built with shadcn/ui and Tailwind CSS
Visualize proportional category distribution with this treemap stats card for React and Next.js. Features a ChartContainer-wrapped Recharts Treemap with rectangles sized proportional to each category value, chart-token fills from var(--chart-1) through var(--chart-5), inside labels showing category name and formatted value, a NumberFlow animated total in the header, and a compact color-dot legend row. Built with TypeScript, ChartContainer from shadcn/ui, Recharts Treemap, NumberFlow, motion/react parent entrance, and Tailwind CSS. Perfect for disk usage visualizations, budget allocation breakdowns, market share distribution widgets, and inventory composition dashboards.
Related Components
React Stats Block Donut Breakdown
Segment distribution donut
React Stats Block Donut Center Total
Donut with center total
React Stats Block Bar Stacked
Stacked segment bar chart
React Stats Block Bar Horizontal
Horizontal bar chart
React Stats Block KPI Quad Grid
2x2 KPI tile grid
React Stats Block Stacked Area
Stacked area breakdown
FAQ
Was this page helpful?
Sign in to leave feedback.
Timeline Event Card
A vertical timeline stats card for React and Next.js with status-colored circular nodes on a connector line, event details with timestamps and values, a pulsing current-event indicator, and semantic emerald blue muted status encoding built with shadcn/ui and Tailwind CSS
Variant Comparison Card
An A/B variant comparison stats card for React and Next.js with a three-tile KPI summary strip above two side-by-side variant panels, NumberFlow animated conversion rates, and emerald winning-variant accents built with shadcn/ui and Tailwind CSS