Collaboration
Activity Feed
The system log for a project or task — who changed what, when. A day-grouped timeline of typed events (status, assignment, comment, due date, label, attachment) each with an actor, an icon, and the values that changed. Filter by category to cut the noise.
npx shadcn@latest add @orbit/activity-feedOverview
Live — use the All / Comments / Status / People filter to narrow the log. Each event shows the actor, its type badge on the avatar rim, and the values that changed: status pills with an arrow, @mention chips, label chips, and mono value chips.
Event vocabulary
Nine event types, each with a fixed badge colour and glyph so the type reads instantly — and a sentence template that shows the concrete diff, not just that something changed. Types map to filter categories: comment and mention under Comments; created, status, and completed under Status; assigned under People.
Compact, or filter-free
Tighten the timeline for a sidebar with density, or hide the filter when the feed is already scoped. Both instances are live.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| groups | ActivityGroup[] | — | Day-grouped events, newest first: { day, events }. |
| density | "comfortable" | "compact" | "comfortable" | Row rhythm: 20px gap between events, or 14px for sidebars. |
| showFilter | boolean | true | Show the All / Comments / Status / People segmented filter in the header. |
| heading | string | "Activity" | Header title, next to the live count of visible events. |
| filter / defaultFilter / onFilterChange | ActivityFilter | "all" | Controlled or uncontrolled filter state. |
| emptyText | string | — | Message when the active filter matches nothing. |
| event.type | "created" | "status" | "assigned" | "comment" | "due" | "label" | "attachment" | "completed" | "mention" | — | Picks the badge tone + glyph, the sentence template, and the filter category. |
| event.actor | { name, initials?, color? } | — | Who did it — 30px initials avatar (deterministic token colour by default) plus a bold name. |
| event.target | string | — | The task / item the event is about, rendered bold. |
| event.from / to | "todo" | "in_progress" | "in_review" | "done" | { label, color } | — | status events: the before → after pills. Built-in keys or custom values. |
| event.assignee / mention / preview / due / label / file | string | — | Type-specific values: @mention chips, comment preview (with @Name highlighting), mono value chips, tinted label chip (+ labelColor). |
| event.time / datetime | string | — | Human-readable timestamp, plus an optional machine-readable value for the <time> element. |
| event.detail | ReactNode | — | Custom detail card under the sentence — replaces the comment preview. |
| …rest | HTMLAttributes | — | Everything else is forwarded to the root element, including ref. |
Usage
An activity feed is a read-only, system-generated log. For human discussion use the Comment thread; for transient confirmations use a Toast.
Keep entries factual
System-generated, past-tense, one event per line. The feed’s value is a trustworthy record, not commentary.
Mix in editable content
No inline replies or edits here — it’s a log. Route discussion to the Comment thread so the history stays immutable.
Show what actually changed
Prefer “Todo → In progress” over “updated status”. Concrete diffs let people skim and trust the record.
Dump every micro-event
Collapse noisy or repeated actions and offer a filter. A wall of low-signal rows gets ignored.
Keyboard & accessibility
The feed itself is presentational; the filter is the only interactive part.