shadcn.io is not affiliated with official shadcn/ui
Activity Timeline Profile Block for React Aria
A developer activity feed of commits, reviews, deploys and comments on a hairline rail, grouped by day, with four kind toggles that carry counts and rows that open to a diff stat, reviewers, environment or comment.
Installation
Overview
Show what a developer did this week with this activity feed profile for React with React Aria. A compact header holds the title and one sentence, and the frame under it opens on the person, then a band of four Toggle Group buttons: Commits, Reviews, Deploys and Comments, each with its count. Press a kind to hide or show it; the status line reads Showing 9 of 14 as you do. Entries sit on a hairline rail under fixed day headings, each a Collapsible that opens to its detail: a diff stat and branch, the reviewers and verdict, the environment and the time it took, or the comment itself. The list lives in a scroll region of fixed height, so filtering and opening never move the panel, and switching every kind off gives an empty state with a way back. It's built from Toggle Group, Collapsible, Empty, Badge, Avatar and Guides, with a CSS entrance only. For a developer profile, a project page or any feed that mixes kinds of events.
FAQ
How do I fill it with my own events?
Edit ENTRIES at the top: each has a day, a time, a kind, a title, a place and a short list of facts that open under it. DAYS and DAY_LABELS name the groups, and KINDS lists the toggles. The counts on the toggles and the Showing line are worked out from the entries, so adding one updates them.
How does the filter work, and can I switch everything off?
The four toggles are a multiple-choice group; an entry shows while its kind is on. You can turn them all off, which shows an empty state with a button that turns them all back on. The scroll region keeps its height either way.
Why are the days and times fixed?
Every day and time is a typed value shown in a time element, never computed from the clock, so the page reads the same on every load and in server rendering. In a real app format the timestamps on the client, in the visitor's time zone.
Does anything here talk to a server?
No. The entries are typed constants and opening a row only changes local state. To make it real, load the events from your API, keep the open rows in state and fetch the next page when the region scrolls to its end.
Is the feed accessible?
Each row title is a heading with a button inside it that is expanded or collapsed, the kind toggles are one named group, and the status line is a polite live region present from the start. The scroll region can take focus, so it scrolls with the keyboard. Times keep their order in a right-to-left layout.