shadcn.io is not affiliated with official shadcn/ui
Engagement Metrics Comments Block for React
Seven threads ranked by comments, replies, people, reactions and last activity in a sortable table, switchable between 7 and 30 days, each opening its most-reacted comment.
Installation
Overview
See which threads brought people in, with this engagement table for React with Base UI. A compact header names the list. The frame opens with a toolbar band: a count of threads and comments, and a Segment Group that swaps the typed numbers between the last 7 and 30 days. The table sits in a held scroll region with sticky column heads, and every head is a button that sorts the table (the head reports ascending or descending, and the status line says it in words). Each row has the thread's title, a thin share bar with "37% of comments", and its numbers. Pressing a thread opens its most-reacted comment under it: the quote, who wrote it and its reactions. It is a real table, so the figures read as a table to a screen reader. On a phone it keeps Thread, Comments and People, and the open row spells out the replies, reactions and last activity. It is built from Segment Group, Badge and Guides, with a native table and a CSS entrance only. For community analytics, forum dashboards and moderation tools.
FAQ
How do I use my own threads?
Edit THREADS: each has a title, the counts for the week and the month (comments, replies, people, reactions), the time of its last activity and its top comment with the author and reaction count. Shares and the totals in the toolbar are worked out from the comments, so they always add up.
How does sorting work?
Pressing a head sorts by it: numbers and dates most first, titles A to Z. Pressing it again reverses. The head carries the sort direction, so a screen reader hears it, and a polite status line says "Sorted by comments, most first." The other period keeps your sort.
How is the top comment chosen?
Here it is typed. In a real app, take the comment with the most reactions among those posted in the chosen period, and break ties by the earliest. Keep it to the period so the 7-day view does not quote a month-old comment.
What stays local?
The period, the sort and which rows are open. The numbers are typed samples and nothing is measured. To make it real, aggregate from your comments table by thread and period on the server, and cache the result, because these counts rarely need to be live.
Is it accessible?
The table has a caption and column heads with sort state, each thread is a button that reports whether its row is open, and the share bar is decoration with the same fact written beside it. The scroll region can be reached with Tab. Counts are written in full inside isolated runs so right-to-left pages keep their order.