Activity feed
ProA team activity feed grouped by day on a quiet avatar timeline, with a type filter, a live new updates button, expandable details, and a mark all read sweep.
Live block · sample data
- A workspace or project activity page for a team product.
- A dashboard panel that shows what changed since someone last looked.
- Use audit-log for compliance history that needs search, export, and exact timestamps.
- Use notification-center for a personal inbox opened from a bell.
- Use changelog-feed for public release notes.
Installation
Pro source and install commands unlock with a Pro plan.
Usage
Use this for a workspace or project activity page. Load events from your activity API, stream new ones in through the items prop, and persist read state through onReadChange; new events in the preview are simulated.
example.tsx
import { ActivityFeed } from "@/components/arc/blocks/activity-feed/activity-feed"; export function ProjectActivity({ events, live }: { events: Activity[]; live: Activity[] }) { return <ActivityFeed items={events} incoming={live} onRead={ids => markRead(ids)} />;}ActivityFeed
A team activity feed grouped by day on a quiet avatar timeline, with one type filter, expandable comments, diffs, deploy details, and photos, a new updates button that lands above the list, and a mark all read sweep.
PropTypeDefaultDescription
itemsActivity[]activitiesEvents, newest first: id, type, actor, action, target, project, day offset, time, unread, and an optional detail.incomingActivity[]incomingActivitiesEvents that arrive while the feed is open. They wait behind the new updates button. Pass [] to turn off the simulation.incomingIntervalnumber6000Milliseconds between simulated arrivals.todaystring"2026-09-24"ISO date the day offsets count back from.defaultRange"today" | "week" | "month""week"How far back the feed reaches.onRead(ids: string[]) => void–Called when events are marked read, one at a time or all at once.titlestring"Activity"Heading.classNamestring–Class on the root.- Tab
- Moves through the type filter, the new updates button, and each expandable event.
- EnterorSpace
- Expands or collapses an event and marks it read.
- Arrow keys
- Move the type filter selection.
- Each day is a labeled section with a heading; events are an ordered list.
- Expandable events are buttons with aria-expanded and aria-controls.
- Unread state is spoken as part of the event and shown with a dot and a stronger name, not color alone.
- The type filter is a labeled group of toggle buttons with aria-pressed and arrow key navigation.
- A polite status region announces new updates shown and how many were marked read.
- New events queue behind a button that opens its own row above the list, so no event is covered; showing them collapses that row and slides the new events in at the top.
- Mark all read sends a hairline down the list; each row lets go of its dot exactly as the line passes it.
- Changing the type filter crossfades the list, so rows never slide over each other.
- Details open with a height spring; the one line preview gives way to the full detail.
- Reduced motion removes the sweep delay and travel and keeps instant state changes.
- Type filters scroll sideways on narrow screens.
- Below 440px the time moves into the meta line under each event.
- Day headings stick with a translucent material while their events scroll under them.
- Filtering is memoized over the item list.
- The sweep uses CSS transition delays and one Web Animations API line, so it costs no React renders per row.
- Photos load through next/image at 96px.
Notes for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Map your events to action and target so each row reads as one sentence.
- Push websocket events into incoming; the new updates button counts them and merges them on click.
- Keep details short: a comment, a small diff, a deploy summary, or up to four photos.
- Persist read state through onRead.
The full library index for assistants is at /llms.txt.
