Chronological record of activity.
Priya Shah starred atlas-ui
Tomás Rivera commented on Q3 roadmap
Aisha Bello uploaded 3 files to Brand assets
Jordan Lee followed you
Sam Okafor closed issue Fix pagination bug
<section class="feed-demo">
<h3 class="feed-demo__heading">Recent activity</h3>
<ol class="feed" data-entries="4">
<li class="feed__item">
<span class="avatar avatar--circle" style="background:#A8E6C1;" aria-hidden="true">PS</span>
<div class="feed__body">
<p class="feed__text"><strong>Priya Shah</strong> starred <span class="feed__object">atlas-ui</span></p>
<time class="feed__time" datetime="2026-08-18T09:42:00Z">2 minutes ago</time>
</div>
</li>
<li class="feed__item">
<span class="avatar avatar--circle" style="background:#A8E6C1;" aria-hidden="true">TR</span>
<div class="feed__body">
<p class="feed__text"><strong>Tomás Rivera</strong> commented on <span class="feed__object">Q3 roadmap</span></p>
<time class="feed__time" datetime="2026-08-18T09:24:00Z">18 minutes ago</time>
</div>
</li>
<li class="feed__item">
<span class="avatar avatar--circle" style="background:#A8E6C1;" aria-hidden="true">AB</span>
<div class="feed__body">
<p class="feed__text"><strong>Aisha Bello</strong> uploaded 3 files to <span class="feed__object">Brand assets</span></p>
<time class="feed__time" datetime="2026-08-18T08:38:00Z">1 hour ago</time>
</div>
</li>
<li class="feed__item">
<span class="avatar avatar--circle" style="background:#A8E6C1;" aria-hidden="true">JL</span>
<div class="feed__body">
<p class="feed__text"><strong>Jordan Lee</strong> followed you</p>
<time class="feed__time" datetime="2026-08-18T06:10:00Z">3 hours ago</time>
</div>
</li>
<li class="feed__item">
<span class="avatar avatar--circle" style="background:#A8E6C1;" aria-hidden="true">SO</span>
<div class="feed__body">
<p class="feed__text"><strong>Sam Okafor</strong> closed issue <span class="feed__object">Fix pagination bug</span></p>
<time class="feed__time" datetime="2026-08-17T18:05:00Z">yesterday</time>
</div>
</li>
</ol>
</section>
<style>
.feed-demo { font: 14px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 18px; border-radius: 12px; max-width: 380px; box-sizing: border-box; }
.feed-demo__heading { margin: 0 0 12px; font-size: 15px; font-weight: 600; }
.feed { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.feed__item { display: flex; gap: 10px; align-items: flex-start; }
.avatar { flex: none; width: 30px; height: 30px; display: grid; place-items: center; font-size: 11px; font-weight: 700; color: #241430; }
.avatar--circle { border-radius: 50%; }
.avatar--square { border-radius: 6px; }
.feed__body { min-width: 0; }
.feed__text { margin: 0; font-size: 13.5px; }
.feed__object { font-weight: 600; }
.feed__time { display: block; margin-top: 2px; font-size: 12px; color: #24143099; }
.feed[data-entries="3"] .feed__item:nth-child(n+4) { display: none; }
.feed[data-entries="4"] .feed__item:nth-child(n+5) { display: none; }
.feed[data-entries="5"] .feed__item:nth-child(n+6) { display: none; }
</style><section class="font-sans text-[14px] leading-relaxed text-[#241430] bg-[#FAF7F2] p-[18px] rounded-xl max-w-[380px] box-border">
<h3 class="m-0 mb-3 text-[15px] font-semibold">Recent activity</h3>
<ol class="feed-tw list-none m-0 p-0 flex flex-col gap-3.5" data-entries="4">
<li class="flex gap-2.5 items-start">
<span class="avatar-tw avatar-tw--circle flex-none w-[30px] h-[30px] grid place-items-center text-[11px] font-bold text-[#241430]" style="background:#A8E6C1;" aria-hidden="true">PS</span>
<div class="min-w-0">
<p class="m-0 text-[13.5px]"><strong class="font-semibold">Priya Shah</strong> starred <span class="font-semibold">atlas-ui</span></p>
<time class="block mt-0.5 text-[12px] text-[#24143099]" datetime="2026-08-18T09:42:00Z">2 minutes ago</time>
</div>
</li>
<li class="flex gap-2.5 items-start">
<span class="avatar-tw avatar-tw--circle flex-none w-[30px] h-[30px] grid place-items-center text-[11px] font-bold text-[#241430]" style="background:#A8E6C1;" aria-hidden="true">TR</span>
<div class="min-w-0">
<p class="m-0 text-[13.5px]"><strong class="font-semibold">Tomás Rivera</strong> commented on <span class="font-semibold">Q3 roadmap</span></p>
<time class="block mt-0.5 text-[12px] text-[#24143099]" datetime="2026-08-18T09:24:00Z">18 minutes ago</time>
</div>
</li>
<li class="flex gap-2.5 items-start">
<span class="avatar-tw avatar-tw--circle flex-none w-[30px] h-[30px] grid place-items-center text-[11px] font-bold text-[#241430]" style="background:#A8E6C1;" aria-hidden="true">AB</span>
<div class="min-w-0">
<p class="m-0 text-[13.5px]"><strong class="font-semibold">Aisha Bello</strong> uploaded 3 files to <span class="font-semibold">Brand assets</span></p>
<time class="block mt-0.5 text-[12px] text-[#24143099]" datetime="2026-08-18T08:38:00Z">1 hour ago</time>
</div>
</li>
<li class="flex gap-2.5 items-start">
<span class="avatar-tw avatar-tw--circle flex-none w-[30px] h-[30px] grid place-items-center text-[11px] font-bold text-[#241430]" style="background:#A8E6C1;" aria-hidden="true">JL</span>
<div class="min-w-0">
<p class="m-0 text-[13.5px]"><strong class="font-semibold">Jordan Lee</strong> followed you</p>
<time class="block mt-0.5 text-[12px] text-[#24143099]" datetime="2026-08-18T06:10:00Z">3 hours ago</time>
</div>
</li>
<li class="flex gap-2.5 items-start">
<span class="avatar-tw avatar-tw--circle flex-none w-[30px] h-[30px] grid place-items-center text-[11px] font-bold text-[#241430]" style="background:#A8E6C1;" aria-hidden="true">SO</span>
<div class="min-w-0">
<p class="m-0 text-[13.5px]"><strong class="font-semibold">Sam Okafor</strong> closed issue <span class="font-semibold">Fix pagination bug</span></p>
<time class="block mt-0.5 text-[12px] text-[#24143099]" datetime="2026-08-17T18:05:00Z">yesterday</time>
</div>
</li>
</ol>
</section>
<style>
.avatar-tw--circle { border-radius: 9999px; }
.avatar-tw--square { border-radius: 6px; }
.feed-tw[data-entries="3"] li:nth-child(n+4) { display: none; }
.feed-tw[data-entries="4"] li:nth-child(n+5) { display: none; }
.feed-tw[data-entries="5"] li:nth-child(n+6) { display: none; }
</style>export function ActivityFeed({
heading = "Recent activity",
entries = "4",
avatarShape = "circle",
accent = "#A8E6C1",
showTimestamps = true,
}) {
const items = [
{ initials: "PS", name: "Priya Shah", action: "starred", object: "atlas-ui", time: "2026-08-18T09:42:00Z", label: "2 minutes ago" },
{ initials: "TR", name: "Tomás Rivera", action: "commented on", object: "Q3 roadmap", time: "2026-08-18T09:24:00Z", label: "18 minutes ago" },
{ initials: "AB", name: "Aisha Bello", action: "uploaded 3 files to", object: "Brand assets", time: "2026-08-18T08:38:00Z", label: "1 hour ago" },
{ initials: "JL", name: "Jordan Lee", action: "followed you", object: null, time: "2026-08-18T06:10:00Z", label: "3 hours ago" },
{ initials: "SO", name: "Sam Okafor", action: "closed issue", object: "Fix pagination bug", time: "2026-08-17T18:05:00Z", label: "yesterday" },
].slice(0, Number(entries));
return (
<section style={{ fontFamily: "system-ui, sans-serif", fontSize: 14, lineHeight: 1.5, color: "#241430", background: "#FAF7F2", padding: 18, borderRadius: 12, maxWidth: 380, boxSizing: "border-box" }}>
<h3 style={{ margin: "0 0 12px", fontSize: 15, fontWeight: 600 }}>{heading}</h3>
<ol style={{ listStyle: "none", margin: 0, padding: 0, display: "flex", flexDirection: "column", gap: 14 }}>
{items.map((item) => (
<li key={item.initials} style={{ display: "flex", gap: 10, alignItems: "flex-start" }}>
<span aria-hidden="true" style={{ flex: "none", width: 30, height: 30, display: "grid", placeItems: "center", fontSize: 11, fontWeight: 700, color: "#241430", background: accent, borderRadius: avatarShape === "circle" ? "50%" : 6 }}>{item.initials}</span>
<div style={{ minWidth: 0 }}>
<p style={{ margin: 0, fontSize: 13.5 }}>
<strong>{item.name}</strong> {item.action}
{item.object ? <> <span style={{ fontWeight: 600 }}>{item.object}</span></> : null}
</p>
{showTimestamps && (
<time dateTime={item.time} style={{ display: "block", marginTop: 2, fontSize: 12, color: "#24143099" }}>{item.label}</time>
)}
</div>
</li>
))}
</ol>
</section>
);
}