Cohort retentionPro

• Heatmap with row/column tracking
• Segment switcher
• Month 1, 6 and 11 averages

• Product and growth teams checking whether newer cohorts retain better.

• Fewer than three cohorts: show a line chart.

Import it from @/components/blocks/cohort-retention after installing. It ships with sample data, so it renders straight away; swap in your own data when you're ready.

import { CohortRetention } from "@/components/blocks/cohort-retention";

export default function Page() {
  return (
    <main className="mx-auto max-w-6xl p-6">
      <CohortRetention />
    </main>
  );
}

• The heatmap is a real table with headers; every cell prints its percentage.

• Cells pop in along the diagonal and re-color when the segment changes.

• The table scrolls horizontally inside the card on phones; the cohort column stays sticky.

• Sample data is plain arrays at the top of the file. Replace them with your API data and keep the shapes.

• Use null for months that haven't happened yet so cells stay empty.