Cohort Retention Grid

Stats72: Cohort Retention Grid

A retention table where each row follows one intake of customers across five periods, filling every cell with an accent step scaled to the figure and dashing the months that have not happened yet.

Installation

Swap YOUR_EMAIL and YOUR_KEY for the email and license key on your account. Find your license key on your account page.

Radix flavor

npx shadcn add "https://ui.beste.co/r/stats72?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

npx shadcn add "https://ui.beste.co/r-base/stats72?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the block to components/beste/block/stats72.tsx plus the badge23 and button21 components it uses for the eyebrow and the action.

Quick start

The installed file exports stats72Demo alongside the block: the exact props behind the preview above. Spread it to get a working table in one line.

import { Stats72, stats72Demo } from "@/components/beste/block/stats72";

export default function RetentionPage() {
  return <Stats72 {...stats72Demo} />;
}

Then replace the demo with your own props. Written out, a trimmed setup looks like this:

import { Stats72 } from "@/components/beste/block/stats72";

export default function RetentionPage() {
  return (
    <Stats72
      badge={{ label: "Retention" }}
      heading="Every practice that joined, and whether they stayed"
      description="Blank cells are months that have not happened yet."
      cohortLabel="Joined"
      sizeLabel="Practices"
      periods={["Month 1", "Month 3", "Month 6", "Month 9", "Month 12"]}
      cohorts={[
        { label: "Q1 2025", size: "18", values: [100, 100, 94, 94, 94] },
        { label: "Q3 2025", size: "29", values: [100, 100, 97, 97, null] },
      ]}
      legendTitle="Reading it"
      legend={[
        "Each figure is the share of that quarter's practices still on the platform.",
        "A practice counts as retained only if it is running live clinics.",
      ]}
      footnote="We publish this quarterly whether the direction is flattering or not."
      button={{ label: "Read why practices left", href: "/churn" }}
    />
  );
}

Props

type Cohort = {
  label: string;
  size: string;
  values: (number | null)[];
};

Behavior notes

• Cell fills come from the internal fillFor helper, which buckets a value into five accent steps at 95, 90, 85 and 75. Those thresholds are tuned for retention percentages, so a table of different figures needs them changed in the installed file.
• null in values means "not yet", and renders a dashed outline with an em dash rather than a zero. That distinction is the whole point of a cohort table, so use null rather than omitting the entry.
• values should be the same length as periods for every cohort. A short array simply renders fewer cells and leaves the row ragged.
• This is a real table with scope="col" and scope="row" headers, so a screen reader announces each figure with its cohort and period. The cohort th carries an explicit font-medium, since a th inherits bold from the browser default and Tailwind's Preflight does not reset it.
• The table has min-w-[44rem] inside an overflow-x-auto wrapper, so it scrolls horizontally on small screens rather than compressing seven columns.
• Cells are fixed at h-11 so the grid stays even whether a cell holds a percentage or a dash.
• The demo's footnote names the row the company is least pleased with, which is what makes publishing the table meaningful.