shadcn.io is not affiliated with official shadcn/ui
Cohort Retention Table Stats Block for Svelte
A triangular retention table of six weekly signup cohorts by months M0 to M5, a percent in every cell in five foreground steps, an average row at the foot and the month-one average in the header.
Installation
Overview
A cohort retention table for Svelte with Ark UI. A start-aligned header states the month-one average, "67% of new users come back in month one". A framed table follows: six weekly signup cohorts down the side (each with its size) and six months across, M0 for the signup month to M5, with the share of the cohort still active written in every cell and shaded in five solid steps of your theme's foreground colour (the text switches to the page colour from 60 percent so it keeps its contrast). Months a cohort has not reached yet are empty outlines, so the filled cells make a triangle, and an average row at the foot gives the mean of the cohorts that have reached each month. It is a real table with a caption and row and column headings, so screen readers announce the cohort and the month for each cell. The averages and the headline are counted from one list of cohorts. On a phone M4 and M5 drop out and the cohort size moves under its name. For retention, repeat purchase and any cohort-by-period measure.
FAQ
How do I use my own cohorts?
Edit COHORTS at the top of the file: a name, the cohort's size and a kept list of percents for month 1 and on (month 0 is always 100). A newer cohort has a shorter list, which is what makes the triangle. The averages are the mean of the cohorts that have reached each month, rounded to a percent, and the headline reads month one's average.
How are the shades chosen?
A cell's step comes from its percent: under 20, 40, 60, 80, and 80 or more. They are solid mixes of the foreground colour into the card, and the text is the foreground colour up to the third step and the page colour from the fourth, so every cell keeps its contrast in light and dark. The number is always in the cell, so shade is never the only signal.
Why is it a native table?
It needs a caption, column headings and a header for each row, and a native table gives all three on every library. Cohort names are row headings, months are column headings (announced as "Month 3"), and an empty cell says "Not reached yet". The table is forced left to right so months run from the start of the line in every language.
How is the average row computed?
For each month it averages only the cohorts that have a value for it, so M5 is the oldest cohort's figure alone and M1 is the mean of five. It is a simple mean of percents, not weighted by cohort size, and the row is set apart from the cohorts with space and a bold heading.