Activity Feed

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

<ActivityFeed />

Installation

npx shadcn@latest add https://webberui.com/r/activity-feed.json

Usage

Order items chronologically (oldest → newest) and just keep pushing new events onto the end of the array; the component pairs items up for animation by id, so new items reveal and existing ones reflow automatically.

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

const items: ActivityFeedItem[] = [
  { id: "1", title: "System started", timestamp: Date.now(), accent: "green" },
  { id: "2", title: "User signed in", description: "From Taipei", timestamp: Date.now() },
];

<ActivityFeed items={items} max={8} />

Styles

Use variant to switch between three layouts: default (card rows), timeline (a connecting timeline on the left), and compact (a trimmed single line).

<ActivityFeed items={items} variant="timeline" />

Props

ActivityFeedItem

How it works

• Data driven: the list is entirely controlled by items (controlled mode). The component holds no internal item state — you only maintain one array and push onto its end, and insertions, removals, and reorders all animate automatically.
• Reveal and reflow: new items reveal with opacity plus offset plus a slight scale, while existing rows spring smoothly out of the way through Motion's layout (FLIP); the oldest items beyond max fade out and exit.
• Relative time: with relativeTime on, times refresh automatically every 30 seconds; the timer is cleaned up when there is no timestamp or when the component unmounts. Timestamps are computed against Date.now(), so the time nodes use suppressHydrationWarning to tolerate SSR/client differences.

Accessibility

• The container carries role="log" plus aria-live="polite" and aria-relevant="additions", so newly inserted items are announced by screen readers while the initial batch is not re-announced.
• Decorative icons, the highlight flash, and the connecting line are all marked aria-hidden; times are rendered as semantic <time dateTime> with a title carrying the full time.
• When the user has "reduce motion" enabled at the system level, FLIP reflow and the offset/scale are disabled, leaving only a minimal opacity fade in, and exits and insertions no longer move.