Cohort retention

Pro

A triangle of retention by sign-up cohort.

Installs components/ui/cohort-retention.tsxDepends on d3-shapeMotion shared motion tokens

pnpm dlx shadcn@latest add @caliper/cohort-retention

Monthly retention by sign-up month

Joined	Size	M0	M1	M2	M3	M4	M5	M6
May	420
Jun	465
Jul	510
Aug	488
Sep	540
Oct	603
Average		100%	85%	74%	66%	60%	56%	53%

Monthly retention by sign-up month
Cohort	Size	Month 0	Month 1	Month 2	Month 3	Month 4	Month 5	Month 6
May	420	420	336	290	262	244	231	222
Jun	465	465	381	330	298	277	262
Jul	510	510	428	372	339	318
Aug	488	488	420	371	344
Sep	540	540	475	430
Oct	603	603	540

When to use #

Use it for

Judging product stickiness over time.

Skip it when

There are too few users to fill the cohorts.

Installation #

terminal

pnpm dlx shadcn@latest add @caliper/cohort-retention

Adds its 4 files to components/ui/, each with its own stylesheet, and installs their packages. Pro installs with your access token, set up once per project. See Pro access. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage #

Import it from your copy of the source. The example behind the preview comes with the source.

example.tsx

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

The worked example comes with Pro

The 19-line example behind the preview opens here with a Pro or Team licence.

Checking your licence…

API reference #