Stop Rebuilding UI
Previous: Variant Comparison Card
Next: Waterfall Chart Card

Stats Waffle Chart Card

A waffle chart stats card for React and Next.js with a 10x10 grid of colored squares showing proportional segment distribution, chart-token colored cells, a legend with percentages, and tabular-nums values built with shadcn/ui and Tailwind CSS

Scroll to load preview

Visualize proportional distribution with this waffle chart stats card for React and Next.js. Features a 10x10 grid of 100 small colored squares where each square represents 1% of the total, four segments colored with var(--chart-1) through var(--chart-4) tokens, a legend row below with color dots and percentage labels, and a header showing the dominant segment. Built with TypeScript, pure CSS grid layout, motion/react parent entrance with useReducedMotion, and Tailwind CSS. Perfect for market share visualizations, browser distribution cards, survey response breakdowns, and audience composition dashboards.

React Stats Block Donut Breakdown

Segment distribution donut

React Stats Block Donut Center Total

Donut with center total

React Stats Block Donut Pill Legend

Donut with pill legend

React Stats Block Activity Streak

Heatmap activity grid

React Stats Block Heatmap Legend

Heatmap with legend

React Stats Block KPI Quad Grid

2x2 KPI tile grid

FAQ

Last updated on April 12, 2026

Was this page helpful?

Sign in to leave feedback.

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

Waterfall Chart Card

A waterfall chart stats card for React and Next.js with Recharts BarChart rendering cumulative additions and subtractions as floating colored bars, emerald gains, red losses, foreground totals, NumberFlow net result, and connector logic built with shadcn/ui and Tailwind CSS