Activity Feed React component
A team activity feed grouped by day: comments with @mentions, status changes shown as from → to pills, file uploads, deploys and new members, emoji reactions you can toggle, inline replies, filter tabs with counts, unread dots with Mark all as read, and a pill that collects new activity until you choose to show it.
About the Activity Feed component
Activity Feed Block shows what your team has been doing, newest first and grouped by day. Each entry says who did what to which item, and adds detail where it helps: the comment itself, the status a task moved from and to, the file that was uploaded.
People can react with emoji, reply inline under comments and filter to comments, updates or mentions. Unread items carry a dot until Mark all as read. New activity never pushes the list away while someone is reading; it waits in a small pill that inserts it when clicked.
When to use it
Use it in project tools, CRMs, help desks, document apps or any dashboard sidebar that shows recent changes.
Keep action phrases short ('moved', 'commented on') and let the target link to the item.
Installation
Add the Activity Feed component to your project with the shadcn CLI. It lands in components/activity-feed.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/activity-feedOr copy the source by hand and install its dependencies:
npm install motion clsx tailwind-mergeProps
<ActivityFeed /> accepts 9 props, all optional.
| Prop | Type | Default |
|---|---|---|
| title | string | "Activity" |
| items | ActivityItem[] | — |
| incoming Items that arrive while the feed is open (demo). They queue behind a "new activity" pill. | ActivityItem[] | DEFAULT_INCOMING |
| interval Milliseconds between incoming items. | number | 3500 |
| now Now, for relative times. | string | "2026-11-01T15:00:00Z" |
| currentUser | string | "You" |
| onReply | (id: string, text: string) => void | — |
| theme | "dark" | "light" | "dark" |
| className | string | — |
- titlestringDefault: "Activity"
- itemsActivityItem[]
- incoming
Items that arrive while the feed is open (demo). They queue behind a "new activity" pill.
ActivityItem[]Default: DEFAULT_INCOMING - interval
Milliseconds between incoming items.
numberDefault: 3500 - now
Now, for relative times.
stringDefault: "2026-11-01T15:00:00Z" - currentUserstringDefault: "You"
- onReply(id: string, text: string) => void
- theme"dark" | "light"Default: "dark"
- classNamestring
npm dependencies
Installed for you by the shadcn CLI.
Activity Feed FAQ
- How do real-time updates work?
- Push new events into incoming (or swap the demo interval for your socket). They queue behind the 'N new activities' pill and are added with their time set to now when the user clicks it, so the list never jumps under the reader.
- Why pass now?
- Relative times like '26m ago' are worked out from now. Passing it keeps the server and browser render identical; update it on an interval if you want times to tick.
- Which item kinds are there?
- comment, mention, status, file, join and deploy. Each gets its own colour dot; status uses from and to, file uses file, comments use comment.
- Are reactions and replies saved?
- They are kept in component state for the demo. onReply gives you the item id and text to store; wire reactions the same way if you need them persisted.
- Is it accessible?
- Filters are a tablist, each day is a labelled section with an ordered list, times use the time element, unread dots and counts have text labels, reaction chips are toggle buttons and Reply buttons say whether the reply box is open.
