Activity Feed
A free activity feed component for React and Tailwind that renders a clean timeline of recent events with avatars, actions, and timestamps. Drop it into any dashboard sidebar or page.
AM
Ava shipped v2
2m
LC
Liam joined Team
1h
NR
Noé starred a repo
3h
Copy the code
export function ActivityFeed() {
const items = [['AM','Ava shipped v2','2m'],['LC','Liam joined Team','1h'],['NR','Noé starred a repo','3h']]
return (
<ul className="w-72 text-white">
{items.map(([ini, text, time], i) => (
<li key={i} className={`flex items-center gap-3 py-2.5 ${i ? 'border-t border-white/7' : ''}`}>
<span className="grid h-8 w-8 place-items-center rounded-full bg-gradient-to-br from-violet-600 to-cyan-400 text-xs font-bold">{ini}</span>
<span className="flex-1 text-sm">{text}</span>
<span className="text-xs text-white/45">{time}</span>
</li>
))}
</ul>
)
}Tailwind CSS · no dependencies · MIT licensed. Paste it straight into any React, Next.js or Vite project.
About the activity feed
This activity feed is part of Empire UI — a free, open-source library of 26+ component types rendered across 40 visual styles, from glassmorphism to neo-brutalism. Every block is copy-paste ready in React and Tailwind CSS with no runtime dependencies.
Want it in a different look? Browse all 40 styles or grab the matching glassmorphism components.