Activity feed

Data display

Chronological activity composed from native avatars, badges, content rows and motion surfaces.

React · copy into your project · light and dark themes

Try it

Added a useful detail
Note
The welcome screen should make the next action feel obvious.
Mira ShahToday, 10:42
Reviewed the first version
The flow reads clearly. Let’s give the final step a little more room.
Arun RaoToday, 09:18

Changes stay in this preview.

Loading preview…

Take it with you

Copy the example, API and usage notes for your editor or AI assistant.

Add to your project

Terminal

npx shadcn@latest add https://luv-jeri.github.io/cojeev-ui/r/activity-feed.json

The command includes the component’s shared dependencies. Your project keeps editable source files.

Include the complete example

This example also composes button, typography. Install its parts together:

Terminal

npx shadcn@latest add https://luv-jeri.github.io/cojeev-ui/r/activity-feed.json https://luv-jeri.github.io/cojeev-ui/r/button.json https://luv-jeri.github.io/cojeev-ui/r/typography.json

Using activity feed

Pass entries in the order they should appear, with stable IDs and optional actor, timestamp, badge and details.
Omit initialVisible to show all supplied entries. Set initialVisible and pageSize to reveal supplied history in pages.
The feed displays your data; it does not fetch, manufacture events or reorder timestamps.

API

Compose the exported parts below. The prop types are read from the React source during the registry build.

Native element or underlying primitive props are inherited where declared, including accessible labels, event handlers and refs.

ActivityFeedProps

Prop	Type	Required
`entries` Caller supplies the chronological order; the feed never reorders entries.	`readonly ActivityEntry[]`	Yes
`title`	`React.ReactNode`	No
`description`	`React.ReactNode`	No
`empty`	`React.ReactNode`	No
`initialVisible` Omit to show every supplied entry, including later appends.	`number`	No
`pageSize`	`number`	No
`showMoreLabel`	`React.ReactNode`	No

Accessibility

A semantic ordered list preserves chronology. Show more announces the new count and moves focus to the first newly shown entry.
Images are decorative alongside named actors. New content respects the shared reduced-motion contract.

States and appearance

restappendedexpandedemptyreduced-motion

For conditional content, keep a MotionPresence boundary around keyed MotionSurface children. The shared entrance and exit states work with native primitives and respect your motion preference.

Try pointer and keyboard interaction, and switch the appearance control in the navigation to compare light and dark mode. Motion respects reduced motion preferences.