Dashboard — Activity feed

A dated timeline of seven activity items with a quoted comment and file chip. Use it to show a readable history of changes in one column.

ReactHTML

1440 × 900

Open in new tab

Component.tsx113 lines

export default function DashboardActivityFeed() {
  return (
    <section className="bg-white text-neutral-900">
      <div className="mx-auto max-w-3xl px-6 py-16 sm:py-24">
        <header className="flex flex-wrap items-center justify-between gap-4">
          <h1 className="text-3xl font-semibold tracking-tight text-balance sm:text-4xl">Activity title</h1>
          <nav aria-label="Activity filters" className="flex flex-wrap gap-2">
            <a href="#" aria-current="true" className="border-b px-2 py-2 text-sm font-medium hover:text-neutral-900 border-neutral-900 text-neutral-900 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900">All</a>
            <a href="#" className="border-b px-2 py-2 text-sm font-medium hover:text-neutral-900 border-transparent text-neutral-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900">Comments</a>
            <a href="#" className="border-b px-2 py-2 text-sm font-medium hover:text-neutral-900 border-transparent text-neutral-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900">Changes</a>
          </nav>
        </header>
        <section aria-labelledby="dashboard-activity-feed-today" className="mt-8">
          <h2 id="dashboard-activity-feed-today" className="text-base font-semibold">Today</h2>
          <ol role="list" className="mt-5">
            <li className="relative pb-6">
              <span aria-hidden="true" className="absolute top-8 bottom-0 left-4 w-px bg-neutral-200" />
              <div className="flex items-start gap-4">
                <span aria-hidden="true" className="relative flex size-8 shrink-0 items-center justify-center rounded-full bg-neutral-200 text-xs font-medium text-neutral-600">AR</span>
                <div className="min-w-0 flex-1">
                  <div className="flex flex-col gap-1 sm:flex-row sm:items-start sm:justify-between sm:gap-4">
                    <p className="text-sm text-neutral-600"><span className="font-medium text-neutral-900">Alex Rivera</span> commented on <a href="#" className="font-medium text-neutral-900 underline underline-offset-4 hover:text-neutral-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900">Item name</a>.</p>
                    <time dateTime="2026-10-10T09:41:00Z" className="shrink-0 text-xs text-neutral-500">09:41</time>
                  </div>
                  <blockquote className="mt-3 rounded-lg bg-neutral-50 p-4 text-sm text-pretty text-neutral-600">
                    <p>Quoted comment that adds context to the change.</p>
                  </blockquote>
                </div>
              </div>
            </li>
            <li className="relative pb-6">
              <span aria-hidden="true" className="absolute top-8 bottom-0 left-4 w-px bg-neutral-200" />
              <div className="flex items-start gap-4">
                <span aria-hidden="true" className="relative flex size-8 shrink-0 items-center justify-center rounded-full bg-neutral-200 text-xs font-medium text-neutral-600">SL</span>
                <div className="min-w-0 flex-1">
                  <div className="flex flex-col gap-1 sm:flex-row sm:items-start sm:justify-between sm:gap-4">
                    <p className="text-sm text-neutral-600"><span className="font-medium text-neutral-900">Sam Lee</span> attached a file to <a href="#" className="font-medium text-neutral-900 underline underline-offset-4 hover:text-neutral-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900">Document title</a>.</p>
                    <time dateTime="2026-10-10T09:26:00Z" className="shrink-0 text-xs text-neutral-500">09:26</time>
                  </div>
                  <a href="#" className="mt-3 inline-flex items-center gap-2 rounded-md border border-neutral-300 bg-white p-2 text-sm font-medium text-neutral-900 hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="size-4 shrink-0"><path d="M14 2H6v20h12V6l-4-4M14 2v5h5" /></svg>File name.pdf</a>
                </div>
              </div>
            </li>
            <li className="relative pb-6">
              <span aria-hidden="true" className="absolute top-8 bottom-0 left-4 w-px bg-neutral-200" />
              <div className="flex items-start gap-4">
                <span aria-hidden="true" className="relative flex size-8 shrink-0 items-center justify-center rounded-full bg-neutral-200 text-xs font-medium text-neutral-600">JM</span>
                <div className="min-w-0 flex-1">
                  <div className="flex flex-col gap-1 sm:flex-row sm:items-start sm:justify-between sm:gap-4">
                    <p className="text-sm text-neutral-600"><span className="font-medium text-neutral-900">Jordan Morgan</span> updated <a href="#" className="font-medium text-neutral-900 underline underline-offset-4 hover:text-neutral-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900">Entry title</a>.</p>
                    <time dateTime="2026-10-10T09:12:00Z" className="shrink-0 text-xs text-neutral-500">09:12</time>
                  </div>
                </div>
              </div>
            </li>
            <li className="relative pb-0">
              <div className="flex items-start gap-4">
                <span aria-hidden="true" className="relative flex size-8 shrink-0 items-center justify-center rounded-full bg-neutral-200 text-xs font-medium text-neutral-600">CK</span>
                <div className="min-w-0 flex-1">
                  <div className="flex flex-col gap-1 sm:flex-row sm:items-start sm:justify-between sm:gap-4">
                    <p className="text-sm text-neutral-600"><span className="font-medium text-neutral-900">Casey Kim</span> completed <a href="#" className="font-medium text-neutral-900 underline underline-offset-4 hover:text-neutral-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900">Task name</a>.</p>
                    <time dateTime="2026-10-10T08:54:00Z" className="shrink-0 text-xs text-neutral-500">08:54</time>
                  </div>
                </div>
              </div>
            </li>
          </ol>
        </section>
        <section aria-labelledby="dashboard-activity-feed-yesterday" className="mt-8">
          <h2 id="dashboard-activity-feed-yesterday" className="text-base font-semibold">Yesterday</h2>
          <ol role="list" className="mt-5">
            <li className="relative pb-6">
              <span aria-hidden="true" className="absolute top-8 bottom-0 left-4 w-px bg-neutral-200" />
              <div className="flex items-start gap-4">
                <span aria-hidden="true" className="relative flex size-8 shrink-0 items-center justify-center rounded-full bg-neutral-200 text-xs font-medium text-neutral-600">SL</span>
                <div className="min-w-0 flex-1">
                  <div className="flex flex-col gap-1 sm:flex-row sm:items-start sm:justify-between sm:gap-4">
                    <p className="text-sm text-neutral-600"><span className="font-medium text-neutral-900">Sam Lee</span> created <a href="#" className="font-medium text-neutral-900 underline underline-offset-4 hover:text-neutral-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900">New item title</a>.</p>
                    <time dateTime="2026-10-09T16:35:00Z" className="shrink-0 text-xs text-neutral-500">16:35</time>
                  </div>
                </div>
              </div>
            </li>
            <li className="relative pb-6">
              <span aria-hidden="true" className="absolute top-8 bottom-0 left-4 w-px bg-neutral-200" />
              <div className="flex items-start gap-4">
                <span aria-hidden="true" className="relative flex size-8 shrink-0 items-center justify-center rounded-full bg-neutral-200 text-xs font-medium text-neutral-600">AR</span>
                <div className="min-w-0 flex-1">
                  <div className="flex flex-col gap-1 sm:flex-row sm:items-start sm:justify-between sm:gap-4">
                    <p className="text-sm text-neutral-600"><span className="font-medium text-neutral-900">Alex Rivera</span> shared <a href="#" className="font-medium text-neutral-900 underline underline-offset-4 hover:text-neutral-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900">Group name</a>.</p>
                    <time dateTime="2026-10-09T14:20:00Z" className="shrink-0 text-xs text-neutral-500">14:20</time>
                  </div>
                </div>
              </div>
            </li>
            <li className="relative pb-0">
              <div className="flex items-start gap-4">
                <span aria-hidden="true" className="relative flex size-8 shrink-0 items-center justify-center rounded-full bg-neutral-200 text-xs font-medium text-neutral-600">JM</span>
                <div className="min-w-0 flex-1">
                  <div className="flex flex-col gap-1 sm:flex-row sm:items-start sm:justify-between sm:gap-4">
                    <p className="text-sm text-neutral-600"><span className="font-medium text-neutral-900">Jordan Morgan</span> changed the status of <a href="#" className="font-medium text-neutral-900 underline underline-offset-4 hover:text-neutral-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900">Review item</a>.</p>
                    <time dateTime="2026-10-09T11:08:00Z" className="shrink-0 text-xs text-neutral-500">11:08</time>
                  </div>
                </div>
              </div>
            </li>
          </ol>
        </section>
        <a href="#" className="mt-6 inline-flex h-11 items-center justify-center rounded-md border border-neutral-300 bg-white px-5 text-sm font-medium text-neutral-900 transition-colors hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900">Load older activity</a>
      </div>
    </section>
  )
}

Pattern notes

When to use: Use for a compact chronological history. Pick dashboard-main-rail when rows are scheduled future items rather than events. Variations: group by week, replace the quote with a status-change note, or add a second attachment chip.
Hierarchy: The page heading is 30px semibold, 36px from 640px; panel titles are 16px semibold, body and labels 14px, and metadata 12px or 14px. Read the 30px heading, 14px filter links, 16px day titles and seven chronological sentences. Visible names accompany decorative initials. Item and file names are underlined links. Action sentence up to 12 words, item name up to 4, comment up to 20 and file name up to 20 characters. Times use semantic time elements with machine-readable dates.
Responsive: The timeline remains one column at every width. Below 640px timestamps sit below the sentence; from 640px each sentence/time row is horizontal with the time aligned right. The avatar column remains 32px, text wraps, and connectors join items only within each day group.
Layout: A white section with a centred container, 24px side padding (px-6), 64px vertical padding (py-16), and 96px from 640px (sm:py-24). A max-w-3xl (768px) container has a wrapping title/filter header and day groups 32px below. Each ordered list uses 32px avatar columns, 16px gaps and a 1px neutral-200 vertical connector at the avatar centre. Rows have 24px bottom spacing. Content has 14px sentences and 12px times; one blockquote uses rounded-lg, neutral-50 and p-4, and one outlined rounded-md file chip has 8px padding. A 44px secondary older-activity link follows by 24px.
States: All links and buttons show a 2px neutral-900 focus-visible outline offset 2px. Primary actions hover to neutral-700, secondary actions to neutral-50, and underlined links to neutral-600. Transitions use the default 150ms timing. All has aria-current=true and a solid bottom border, so selection does not depend on fill. Filters, item links, file link and older-activity link are CSS-only action slots. No disabled or expanded states.

Desktop wireframe

┌──────────────────────────────────────────────────────────┐
│ Activity title                 [All] [Comments] [Changes]│
│ Today                                                    │
│ Avatar | Name + action + [Item]                  Time    │
│        | ┌────────────────────────────────────────────┐  │
│        | │ Quoted comment                             │  │
│        | └────────────────────────────────────────────┘  │
│ Avatar | Name + action + [Item]                  Time    │
│        | [File chip]                                     │
│ Avatar | Name + action + [Item]                  Time    │
│ Avatar | Name + action + [Item]                  Time    │
│ Yesterday                                                │
│ Avatar | Name + action + [Item]                  Time    │
│ Avatar | Name + action + [Item]                  Time    │
│ Avatar | Name + action + [Item]                  Time    │
│ [Load older activity]                                    │
└──────────────────────────────────────────────────────────┘

View all

Dashboard — App shell with sidebar
Layout tags: sidebar,grid,numbers
Dashboard — Bento overview
Layout tags: bento,numbers,media
Dashboard — Calendar beside daily agenda
Layout tags: sidebar,list,numbers

Dashboard — Activity feed

Pattern notes

More in Dashboard

Dashboard — App shell with sidebar

Dashboard — Bento overview

Dashboard — Calendar beside daily agenda