Activity Feed

Chronological list of user actions and system events, in simple, timeline, grouped, or notification panel form.

Anna Chen commented on Project Atlas
2h ago

Installation

npx paubha@latest add activity-feed

Usage

import {
  ActivityFeed,
  ActivityFeedItem,
} from "@/components/ui/activity-feed";
import { Avatar } from "@/components/ui/avatar";

<ActivityFeed>
  <ActivityFeedItem
    avatar={<Avatar initials="AC" alt="Anna Chen" size="sm" />}
    title={
      <>
        <span className="font-semibold">Anna Chen</span> commented on Project
        Atlas
      </>
    }
    timestamp="2h ago"
  />
</ActivityFeed>

Examples

Simple activity list

Anna Chen commented on Project Atlas
2h ago
Jordan Lee invited you to a meeting
4h ago
Olivia Rhye uploaded 3 files to Design Assets
1d ago

Timeline feed

Project Atlas launched
Today · 10:20 AM
Completed
Design review scheduled
Yesterday · 4:30 PM
In Progress
Database migration completed
Oct 12 · 9:05 AM
Success
Weekly sync scheduled
Oct 10 · 2:00 PM
Scheduled

Grouped activity feed

Today

Anna Chen commented on Project Atlas
2h ago
Jordan Lee invited you to a meeting
4h ago

Yesterday

Olivia Rhye uploaded new design assets
1d ago

Notification panel

Notifications

Anna Chen mentioned you in a comment
2h ago
Jordan Lee invited you to a meeting
4h ago
Olivia Rhye uploaded new design assets
1d ago

API reference

ActivityFeed

Prop	Type	Default	Description
divided	boolean	false	Draws a divider between rows.
className	string	—	Merged onto the root list element.
children	React.ReactNode	—	ActivityFeedItem or ActivityFeedTimelineItem children.

ActivityFeedItem

Prop	Type	Default	Description
avatar	React.ReactNode	—	Leading media, typically <Avatar size="sm" />.
title	React.ReactNode	—	Primary activity line (actor + action).
timestamp	React.ReactNode	—	Relative or absolute time under the title.
unread	boolean	false	Shows a brand unread indicator on the trailing edge.

ActivityFeedGroup

Prop	Type	Default	Description
label	React.ReactNode	—	Section label, e.g. "Today", "Yesterday".
children	React.ReactNode	—	Usually an ActivityFeed of items.

ActivityFeedTimelineItem

Prop	Type	Default	Description
title	React.ReactNode	—	Event title.
timestamp	React.ReactNode	—	Trailing timestamp on the title row.
status	React.ReactNode	—	Status row under the title, pass a Paubha Badge.
last	boolean	false	Hides the downward timeline connector.

ActivityFeedPanel

Prop	Type	Default	Description
title	React.ReactNode	"Notifications"	Panel heading.
onMarkAllRead	() => void	—	Shows the "Mark all read" button when provided.
markAllReadLabel	React.ReactNode	"Mark all read"	Label for the mark-all action.
children	React.ReactNode	—	Usually an ActivityFeed of items.

Accessibility

List. ActivityFeed is a native <ul>; each item is a native <li>.
Timestamps. Plain text; prefer relative strings that stay readable without needing live updates.
Unread. The unread dot is decorative ( aria-hidden); convey unread state in the item text or aria-label when needed.
Mark all read. Real role="button" with visible focus via shadow-glow-focus.
Timeline rail. Decorative; aria-hidden on the connector.

On this page