Activity Feed
Chronological list of user actions with avatar, connector line, and optional supporting content (labels, comments, files).
import
{ ActivityFeed } from "@pepulux/ui"Default
OR
Olivia RhyeJust now
Added a comment to Q2 Report
PB
Phoenix Baker2 hours ago
Updated the pricing model
Finance
LS
Lana SteinerYesterday
Left a review
“Great work on this feature. The UX feels very polished.”
Compact (sm)
OR
Olivia RhyeJust now
Added a comment to Q2 Report
PB
Phoenix Baker2 hours ago
Updated the pricing model
Finance
Type: Messages
Chat-bubble layout with an @handle under the name.
OR
Olivia RhyeJust now
@oliviaCan you review the latest draft before the meeting?
PB
Phoenix Baker2 min ago
@phoenixSure, attaching the revised pricing sheet.
PDF
pricing-v2.pdf2.4 MB
Divider: Divider
OR
Olivia RhyeJust now
Added a comment to Q2 Report
PB
Phoenix Baker2 hours ago
Updated the pricing model
Finance
LS
Lana SteinerYesterday
Left a review
“Great work on this feature. The UX feels very polished.”
Divider: Line
OR
Olivia RhyeJust now
Added a comment to Q2 Report
PB
Phoenix Baker2 hours ago
Updated the pricing model
Finance
LS
Lana SteinerYesterday
Left a review
“Great work on this feature. The UX feels very polished.”
Divider: None
OR
Olivia RhyeJust now
Added a comment to Q2 Report
PB
Phoenix Baker2 hours ago
Updated the pricing model
Finance
LS
Lana SteinerYesterday
Left a review
“Great work on this feature. The UX feels very polished.”
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| items* | ActivityFeedItem[] | — | Array of feed items |
| size | "sm" | "md" | "md" | Avatar size (maps to Avatar sm / md) |
| type | "notifications" | "messages" | "notifications" | Figma Type — action log or chat bubbles with @handle |
| divider | "connector" | "divider" | "line" | "none" | "connector" | Figma Divider — connector between avatars, rule between items, continuous rail, or none |
| className | string | — | Additional CSS classes |