Cohort Retention Heatmap
A CSS grid heatmap of weekly cohort retention shaded by foreground opacity tokens with no chart library.
A CSS grid heatmap of weekly cohort retention shaded by foreground opacity tokens with no chart library.
Search blocks by description or jump to a page.
The source for every Application block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Cohort Retention Heatmap renders seven weekly cohorts (May 5 through Jun 16) as rows, with weeks since signup (Wk 0 through Wk 6) across the columns. Each cell is a div shaded with bg-foreground opacity steps: /80 for 90% and above, /55 for 70-89%, /38 for 55-69%, /22 for 40-54%, /10 below. The percentage sits inside the cell in text-background. Future cells that have not elapsed yet are bg-muted/30 placeholders. A footnote explains: Week 0 is always 100% (the cohort itself).
The cohorts array drives every row. The opacityClass function maps a retention value to a theme token so the heatmap reads in both light and dark modes without a green or red colour scale.
Reach for this block on a growth or analytics dashboard to show how well each acquisition cohort is retaining over time. Wire the cohorts array to your cohort retention query grouped by signup week and weeks elapsed.
A natural flow around it on an Application Pro page:
Before
After
One strong use is weekly signup cohort retention. Other heatmaps:
Tip: the empty placeholder cells are as informative as the filled ones; they show which cohorts are still maturing, resist the urge to hide them.