shadcn.io is not affiliated with official shadcn/ui
Retention Cohorts Comments Block for Vue
A roster of the people who first commented in the same week, with eight week dots, a streak and a last-seen week for each, an All, Active and Lapsed filter, and a draft-only Invite back for lapsed commenters.
Installation
Overview
See who came back after their first comment, with this cohort roster for Vue with Ark UI. A compact header names the product and holds a Native Select that picks one of five cohorts (everyone whose first comment landed in the same week). Under it a Segment Group filters the roster to All, Active or Lapsed (no comment in the last two weeks), and a sentence says how many of the cohort came back in week 2 and how many are active now. The roster is a native table: each of six commenters has eight week dots (filled when they commented that week, hollow when they did not, dashed when the week has not happened yet), a streak in words, the week they were last seen and, for the lapsed, an Invite back button that only drafts an invitation in this demo. On a phone the table keeps the person, six of the dots and the streak, with the button under the name. It is built from Native Select, Segment Group, Button, Avatar, Empty and Guides, with a CSS entrance only. For community managers who want the people behind a retention number.
FAQ
How do I use my own cohorts?
Edit STARTS (the Monday of each cohort) and LINES, one list per cohort with one line per person: the name and eight marks, 1 for a week with a comment, 0 for a week without and - for a week that has not happened. Everything else is worked out from the marks: active and lapsed, the streak, the last-seen week, the week-2 count and the sentences. A cohort of eight weeks has eight real marks; a younger one ends in dashes.
What counts as active, lapsed and a streak?
Active means at least one comment in either of the last two weeks that have happened for that cohort; lapsed is the rest. A streak is the run of weeks with a comment that ends at the latest week, so a person who skipped the latest week has no streak now. Change isActive and streakOf if your community counts differently.
What stays local, and how do I make it real?
Everything; the figures are typed and Invite back only marks the row as Drafted and says "Nothing was sent." To make it real, derive the cohorts and marks from your comments table (group by the week of each person's first comment), and open your own invitation composer from the button instead of setting local state.
Is it accessible?
The dots are hidden from screen readers and each row says the same thing in words ("Commented in weeks 0, 1 and 3"). The table has a caption and row headers, the filter is a labelled group, the empty state is reachable by filtering a cohort where nobody lapsed, and every change is spoken by one status line. The dots differ by fill and outline, not by colour.