Shadcn.io is not affiliated with official shadcn/ui
Stats Cohort Retention Card
A cohort retention table stats card for React and Next.js with a triangular heat-colored grid showing retention percentages by cohort month and period, intensity-mapped cell backgrounds, row and column headers, and tabular-nums values built with shadcn/ui and Tailwind CSS
Analyze user retention across cohorts with this cohort retention table stats card for React and Next.js. Features a triangular grid where rows represent signup cohorts (Jan-Jun), columns represent months since signup (M0-M5), cells are intensity-colored from dark (high retention) to light (low retention), empty upper-right cells for future data, a header with average retention and best cohort callout, and tabular-nums percentages in every cell. Built with TypeScript, pure CSS grid with dynamic opacity, motion/react parent entrance, and Tailwind CSS. Perfect for SaaS retention dashboards, subscription analytics, user engagement reports, and product-market fit measurement widgets.
Related Components
React Stats Block Heatmap Legend
Heatmap with intensity legend
React Stats Block Activity Streak
Heatmap activity grid
React Stats Block Hourly Heatmap
Hourly activity grid
React Stats Block Funnel Dropoff
Funnel with dropoff rate
React Stats Block Comparison Delta
Period comparison card
React Stats Block Period Comparison
Period over period card
FAQ
Was this page helpful?
Sign in to leave feedback.
Calendar Heatmap Month
A month-view calendar heatmap stats card for React and Next.js with a 6x7 grid of day cells, 5-level emerald intensity ramp, inline date numerals, and an intensity legend built with shadcn/ui and Tailwind CSS
Comparison Dual Gauge
A comparison stats card for React and Next.js with two side-by-side radial gauge charts powered by Recharts PieChart, NumberFlow animated percent values centered in each ring, semantic chart token fills, and a delta callout between the panels built with shadcn/ui and Tailwind CSS