Activity Feed
List of activity items with avatar, action text, and timestamp.
Sofia Alvarez commented on the Q1 roadmap
2 min agoMarcus Lee uploaded the new brand kit
12 min ago
Nia Patel closed the onboarding checklist
1 hour agoTeam Ops shared updated workspace guidelines
3 hours agoRiley Chen completed the QA pass
YesterdayDependencies
- clsx
- tailwind-merge
Files
- components/ui/activity-feed.tsx
Installation
Using shadcn CLI
npx shadcn add activity-feed --url https://ui.hampton.ioManual installation
Copy the component file to your project and install dependencies:
npm install clsx tailwind-mergeRelated Social Components
Activity Feed Item
Timeline style activity entry with avatar, action text, timestamp, and optional attachment preview.
Activity Ticker
Live scrolling activity feed with looping updates and optional pause on hover.
Avatar Group
Stacked avatar group with overflow count.
Chat Bubble
Message bubble with avatar, timestamp, tail pointer for left/right alignment, and read receipt dots.
Comment Box
Comment input with avatar, submit action, and live character count.
Comment Card
Compact comment card with avatar, name, timestamp, body text, like and reply actions.