Cohort retentionPro
A cohort retention triangle that morphs into retention curves and rewashes by segment.
Live block · sample data
Cohort retention
Workspaces still active each month after signup. Data through Aug 31, 2026.
- Month 1 retention
- 76.2%+5.2 ptslatest 3 vs first 3 cohorts
- Month 6 retention
- 45.7%+3.4 ptslatest 3 vs first 3 cohorts
- New workspaces
- 5,199Signed up Aug 2025 to Jul 2026
Use the arrow keys to move between cohorts and months, Home and End to jump within a cohort, and Escape to clear.
| Cohort | Workspaces | Month 1 | Month 2 | Month 3 | Month 4 | Month 5 | Month 6 | Month 7 | Month 8 | Month 9 | Month 10 | Month 11 | Month 12 |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Aug 2025 | 360 | 72.5% | 62.5% | 55.3% | 50.3% | 46.4% | 43.1% | 41.9% | 40.6% | 39.4% | 38.9% | 38.6% | 38.1% |
| Sep 2025 | 386 | 74.1% | 62.7% | 55.4% | 50.5% | 47.2% | 44.6% | 43.0% | 40.9% | 40.9% | 39.9% | 39.1% | Not yet measured |
| Oct 2025 | 402 | 74.1% | 63.7% | 55.7% | 51.0% | 46.5% | 43.8% | 43.0% | 42.0% | 40.0% | 39.3% | Not yet measured | Not yet measured |
| Nov 2025 | 416 | 74.5% | 64.7% | 57.2% | 52.6% | 47.6% | 46.2% | 44.5% | 42.3% | 40.6% | Not yet measured | Not yet measured | Not yet measured |
| Dec 2025 | 395 | 76.2% | 65.6% | 58.2% | 52.9% | 49.4% | 47.3% | 44.6% | 44.1% | Not yet measured | Not yet measured | Not yet measured | Not yet measured |
| Jan 2026 | 398 | 71.6% | 62.8% | 56.8% | 51.5% | 48.5% | 46.0% | 43.7% | Not yet measured | Not yet measured | Not yet measured | Not yet measured | Not yet measured |
| Feb 2026 | 461 | 76.6% | 67.0% | 58.8% | 54.0% | 50.3% | 48.2% | Not yet measured | Not yet measured | Not yet measured | Not yet measured | Not yet measured | Not yet measured |
| Mar 2026 | 434 | 76.7% | 67.5% | 59.9% | 53.9% | 50.7% | Not yet measured | Not yet measured | Not yet measured | Not yet measured | Not yet measured | Not yet measured | Not yet measured |
| Apr 2026 | 459 | 78.6% | 68.2% | 60.6% | 54.7% | Not yet measured | Not yet measured | Not yet measured | Not yet measured | Not yet measured | Not yet measured | Not yet measured | Not yet measured |
| May 2026 | 502 | 78.1% | 67.3% | 59.8% | Not yet measured | Not yet measured | Not yet measured | Not yet measured | Not yet measured | Not yet measured | Not yet measured | Not yet measured | Not yet measured |
| Jun 2026 | 495 | 78.4% | 69.3% | Not yet measured | Not yet measured | Not yet measured | Not yet measured | Not yet measured | Not yet measured | Not yet measured | Not yet measured | Not yet measured | Not yet measured |
| Jul 2026 | 491 | 79.8% | Not yet measured | Not yet measured | Not yet measured | Not yet measured | Not yet measured | Not yet measured | Not yet measured | Not yet measured | Not yet measured | Not yet measured | Not yet measured |
| Average | 5,199 | 76.2% | 65.8% | 57.9% | 52.5% | 48.4% | 45.7% | 43.5% | 42.0% | 40.3% | 39.4% | 38.9% | 38.1% |
- Growth or customer success dashboards comparing how signup cohorts retain month over month.
- Views that need both the cohort triangle and retention curves from the same data.
- Use journey-flow for paths between funnel steps.
- Use activity-heatmap for activity by day rather than by cohort.
- Use revenue-explorer for revenue over time.
Installation
Pro source and install commands unlock with a Pro plan.
Usage
Use this on a growth or customer success dashboard to compare how signup cohorts retain. Replace simulate() in cohort-data.ts with your cohort sizes and retained counts per month; rates, averages, headline figures and deltas are derived from them.
example.tsx
import { CohortRetention } from "@/registry/blocks/cohort-retention/cohort-retention"; export default function GrowthPage() { return ( <section> <CohortRetention /> </section> );}CohortRetention
A cohort retention triangle that morphs into retention curves, with segment filters and a keyboard-navigable cell cursor. Cohort sizes and retained counts come from simulate() in cohort-data.ts.
No props.
- Arrow keys
- Move the cell cursor between cohorts (rows) and months (columns).
- HomeorEnd
- Jump to the first or last month of the current cohort.
- Escape
- Clears the cursor.
- The chart is a focusable role="group" with aria-describedby, and a polite live region reads the focused cohort, month and rate.
- Decorative cells and curves are aria-hidden; the legend is a labelled role="img".
- Cells morph into curves on the view switch and rewash their colour when the segment changes; headline figures roll with Animated counter.
- Reduced motion jumps values instantly and follows the pointer without springs.
- Chart geometry follows container width through a ResizeObserver.
- Below a 560px container padding tightens and the KPI context wraps.
- The chart uses touch-action pan-y, so touch scrubbing does not block vertical page scroll.
- The triangle is 12 cohorts by 12 months of SVG cells; much larger grids mean many more animated cells.
- Cell colour changes use CSS transitions with a stagger instead of JavaScript per cell.
Notes for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Use on a growth or customer success dashboard to compare how signup cohorts retain.
- Replace simulate() in cohort-data.ts with your cohort sizes and monthly retained counts; rates, averages and deltas are derived.
- Edit SEGMENTS in cohort-data.ts to match your segments. No props or callbacks.
- Composes Arc Segmented control and Animated counter.
The full library index for assistants is at /llms.txt.