Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Comments blocks

Pro

Retention Cohorts Comments Block for Ark UI

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.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

See who came back after their first comment, with this cohort roster for React 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.

Does the panel move when I filter?

No. The roster keeps room for six rows, so filtering down to two commenters leaves the panel the same height, and the empty state sits in that space.

How does it look on a phone?

The table keeps the person with the streak under the name, six of the eight dots and, for a lapsed person, the Invite back button under the streak. The last-seen column and the separate action column appear from the small breakpoint up.

All 100 comments blocks