shadcn.io is not affiliated with official shadcn/ui
Member Activity Journey Comments Block for React
One member's history on a community: counts of comments, replies and reactions, an eight-week bar figure and their activity grouped by week with a type filter and a button to load earlier weeks.
Installation
Overview
Show what one person has contributed, with this member journey for React with Base UI. A compact header names the view and a hairline frame has two cells divided by a rule. The side cell is the profile: an initials Avatar, the name, Member since Jan 2026, a Badge for the role, three counts worked out from the activity (comments, replies, reactions given) and an eight-week bar figure with a hidden data table, drawn in SVG on one shared scale. The main cell is the activity: a Segment Group filters by type, and the lines sit in a held scroll region grouped by week under sticky week heads, each with a type glyph, what happened, the thread and a quoted excerpt. The bars follow the filter. Load earlier weeks appends three more weeks inside the region, and a type with nothing in the weeks loaded shows an Empty state. It is built from Avatar, Badge, Segment Group, Button, Empty and Guides, with a CSS entrance only. For member profiles in forums, documentation communities and support desks.
FAQ
How do I fill it with a real member?
Edit LINES, one string per activity: id | date | kind | thread | the words, where kind is comment, reply or reaction. The counts, the weeks, the bars and the sticky week heads are all derived from the dates. The profile name and the Member since line are plain text in the side cell.
What do the bars show?
Activity per week for the last eight weeks, on one scale shared by every type, so a filtered figure is honest next to the unfiltered one. The same numbers are in a hidden table for screen readers, with the week it starts on. The bars follow the type filter.
What does Load earlier weeks do?
It appends the next three weeks to the end of the held region, three at first and then up to all eight. At the end the button stays but says all eight weeks are loaded. A type with nothing in the weeks shown, such as Replies at first, shows an empty state that points you to the button.
What stays local?
The activity is typed in the file and nothing is fetched or saved. To make it real, page the activity by week from the server, send the weekly counts with it for the figure, and keep the type filter in the query so it can be shared.
Is it accessible?
The profile counts are a description list, the figure has a table with the same numbers, the filter is a named group and the activity is a labelled scroll region. Type is written in words (Commented on, Replied in, Reacted in), never only a glyph. Names, dates and counts are isolated for right-to-left text.