Activity Feed
The shared stream of a workspace, newest first, a day at a time. Every row is a sentence: a person, a verb, a thing, with the comment, the change or the files underneath. One person doing the same thing several times becomes one row that opens. Tabs and search filter by kind with real counts, and earlier activity loads on demand.
Ready for AI tools one file typed props installs by name prompt included
The decision inside it
It never moves what you are reading
Events that arrive while you are further down wait behind a small pill that says how many are new. Press it, or scroll back up, and they open in. At the top there is nobody to interrupt, so they appear straight away.
Installation
How you get it
Paste this into Claude Code, Cursor, Codex or any coding agent. It installs the file and uses it as it is, instead of writing a new one.
Use Layro's Activity Feed for this.
Install it: npx shadcn@latest add @layro/activity-feed
Import it from @/components/ui/activity-feed.
Do not rewrite or restyle it. Pass my data through its props
and keep its built-in states.For the full brief with every prop and the mistakes assistants usually make, use Copy prompt above. Pro components install through the @layro registry with your CLI token: see the Namespaced tab.
API
“Copy prompt” above puts a full brief on your clipboard — install command, dependencies, props, and the mistakes an assistant usually makes with this component.
Props
Read from the component’s own TypeScript interface when the site is built, so this table cannot drift from the file you install.
| Prop | Type | Notes |
|---|---|---|
eventsrequired | ActivityEvent[] | In any order. The feed sorts them newest first. |
onOpen | (target: ActivityTarget, event: ActivityEvent) => void | Called when a target is pressed. Without it, targets are plain text. |
now | Date | number | "Now", for the relative times and for Today and Yesterday. Defaults to the clock, and then keeps time. |
locale | string | A BCP 47 tag for dates and times: "en-GB". Defaults to the reader's own. |
title | React.ReactNode | false | The heading. Pass `false` to hide it. |
filter | string | The kind being shown, or "all". Leave it out and the feed keeps its own. |
defaultFilter | string | Default "all". |
onFilterChange | (filter: string) => void | Called with the kind, or "all", when a tab is chosen. |
searchable | boolean | Show the search field. Default true. |
kinds | Record<string, ActivityKindInfo> | Name, icon and plural for your own kinds, or to rename the six built in. |
groupWindowMs | number | How close together one person's repeats must be to share a row. Default ten minutes. |
unreadSince | Date | number | string | Draws one "New" line under everything later than this moment. |
onLoadMore | () => void | Promise<void> | Adds "Show earlier activity". Return a promise: it shows the wait, and a rejection offers Retry. |
hasMore | boolean | Whether there is anything earlier to load. Default false. |
maxHeight | number | string | Scrolls the feed inside itself at this height. Leave it out and it grows with the page. |
loading | boolean | Waiting for the first page. Shows rows shaped like the feed. |
Dependencies
npm packages
clsxframer-motionlucide-reacttailwind-mergeLayro foundations, installed alongside it
layro-themeavatarbadgebuttoninputstatetabsLifetime access
Every component, and everything we ship next.
- All 112 components, source included
- The template, and everything released after you buy
- shadcn CLI or download — React 18/19, Tailwind v4
- One payment. No subscription.
More in Workspace
All Workspace components
Settings Page
BlockPaidThe settings screen: sections, a list to jump around, search, and a save bar that appears on change.
Included with lifetime access
Member Card
FreeOne person's standing in a workspace, as a row — and a menu derived from it.
Members Table
FreeSearch, filters, and a bulk bar that names its refusals before it runs.
Access Request Inbox
FreeApprove or deny with a reason, and an undo that releases what it superseded.
Roles & Permissions Matrix
PaidInherited permissions drawn differently from ones you granted directly.
Included with lifetime access
Access Review
PaidEvidence on every row, and a bulk action that refuses the dormant accounts.
Included with lifetime access