A vertical timeline of events with avatars, detail cards and a staggered entrance.
npx shadcn@latest add https://hyperblur.dev/r/activity-feed.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/activity-feed.tsx.
import { ActivityFeed } from "@/components/hyperblur/activity-feed"
<ActivityFeed
items={[
{
id: "1",
actor: "Maya Chen",
action: "moved",
target: "ORB-142",
time: "2m ago",
tone: "success",
detail: "In progress to In review",
},
]}
/>| Prop | Type | Default | Description |
|---|---|---|---|
| items | ActivityFeedItem[] | required | Events in display order, newest first. Each has id, actor, action, time and optional target, avatar, detail and tone. |
| maxHeight | number | Caps the height in pixels and scrolls the feed. Unlimited when omitted. | |
| showLine | boolean | true | Draw the connecting line between avatars. |
| color | string | "#2f7bff" | Accent color used for the default tone dot. |