# Cohort retention

> Retention by signup month as a heatmap, with segments.

Block · Pro · https://lodeui.com/blocks/cohort-retention

## When to use

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

## When not to use

- Fewer than three cohorts: show a line chart.

## Installation

```bash
npx shadcn@latest add @lode/cohort-retention
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

## Usage

```tsx title="example.tsx"
import { CohortRetention } from "@/components/blocks/cohort-retention";

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

Built from: Heatmap, Number ticker, Segmented control

## API reference

### CohortRetention

Retention by signup month as a heatmap with a segment switcher and month 1, 6 and 11 averages. Also the default export. No props: sample data sits at the top of the file, ready to swap for your own.

No props.

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Tab | Reach the segment control |
| ← / → | Change segment |

## Accessibility

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

## Motion

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

## Responsive behavior

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

## Performance

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

## Notes for AI

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

## Related

- [Heatmap](https://lodeui.com/components/heatmap) — A color-scaled grid with row and column tracking, for cohorts and schedules.
- [Revenue breakdown](https://lodeui.com/blocks/revenue-breakdown) — Recurring revenue split into new, expansion and churn, with a draggable range brush.