Activity Feed

A chronological timeline of events with user attribution, action descriptions, and relative timestamps. Renders an avatar (initials or custom icon) per entry.

AM
Alice Martin deployed production v2.4.0
2 minutes ago
BC
Bob Chen opened pull request #142 Add dark mode
38 minutes ago
CK
Carol Kim closed issue #118 Login timeout bug
2 hours ago
Scheduled maintenance window
5 hours ago

import { ActivityFeed } from "@aetherstack/patterns"

Installation

terminal

npx aether-ui add activity-feed

Import

import.tsx

import { ActivityFeed, ActivityItem } from "@aetherstack/patterns"

Usage

activity-feed.tsx

import { ActivityFeed } from "@aetherstack/patterns"

const items = [
  {
    id: "1",
    user: "Alice Martin",
    action: "deployed",
    target: "production v2.4.0",
    timestamp: new Date(),
  },
  {
    id: "2",
    user: "Bob Chen",
    action: "opened pull request",
    target: "#142 Add dark mode",
    timestamp: new Date(Date.now() - 30 * 60 * 1000),
  },
]

<ActivityFeed items={items} />

Props

Prop	Type	Default	Description
items*	ActivityEntry[]	—	List of activity entries to render.
className	string	—	Additional classes on the wrapper.

* Required

Accessibility

→Rendered as a <ul role="list"> with an aria-label for screen readers.
→Decorative connecting line and avatars are aria-hidden.
→Timestamps use human-readable relative text (e.g. "5 minutes ago").