Skip to content
Browse themes
Product block

Activity Feed Panel

Recent-events list with typed icons and relative timestamps that keep the absolute value in a <time> element.

171 lineslucide-reactAdded 8 Aug 2026Updated 10 Sept 2026
  • activity
  • feed
  • timeline
  • events
  • dashboard

What's included

  • components/dashboard-activity-feed.tsx
  • Needs lucide-react

Works with

  • React
  • Next.js
  • Tailwind CSS
  • TypeScript

npx hoverlab add dashboard-activity-feed

Or over MCP, from your editor's agent — no account needed.

License

Free to read, copy and install, for personal and non-commercial projects. Shipping it in client work or a paid product needs Pro ($79 once). The source lands in your repo and stops being ours — no attribution, nothing to upgrade.

Was this useful?

Start a page with this section — add more, order them, and leave with the page source.

Preview

Recent activity

  • Northwind Ltd upgraded to Team annual

  • Marco Silva created an account

  • Priya Raman commented on Billing migration

  • Alex Chen pushed 3 commits to main

  • Dana Whitfield created an account

Rendered live in your current theme — this is the same component whose source is below, not a screenshot of it.

Source

components/dashboard-activity-feed.tsx
/**
 * <DashboardActivityFeed> — a "what just happened" panel.
 *
 * Timestamps render as relative text ("2h ago") inside a <time> carrying
 * the absolute ISO value, so hovering gives the exact moment and a screen
 * reader is not left with a figure that silently goes stale.
 *
 * Each row's actor avatar is initials rather than an image. An activity
 * feed is the worst place for avatar images: a dozen network requests for
 * decoration, each one a layout shift when it lands.
 */

import * as React from 'react'
import { GitCommit, MessageSquare, UserPlus, CreditCard, ArrowRight } from 'lucide-react'

export type ActivityKind = 'commit' | 'comment' | 'signup' | 'payment'

export interface ActivityEvent {
  id: string
  kind: ActivityKind
  actor: string
  /** Verb phrase — the actor's name is prefixed automatically. */
  action: string
  target?: string
  /** ISO timestamp. */
  at: string
}

export interface DashboardActivityFeedProps {
  events?: ActivityEvent[]
  heading?: string
  /** "now" for relative formatting. Pass a fixed value to keep it testable. */
  now?: Date
  viewAllHref?: string
  className?: string
}

const KIND_STYLE: Record<ActivityKind, { icon: React.ReactNode; tone: string }> = {
  commit: { icon: <GitCommit className="h-3.5 w-3.5" />, tone: 'bg-sky-500/15 text-sky-500' },
  comment: {
    icon: <MessageSquare className="h-3.5 w-3.5" />,
    tone: 'bg-violet-500/15 text-violet-500',
  },
  signup: { icon: <UserPlus className="h-3.5 w-3.5" />, tone: 'bg-emerald-500/15 text-emerald-500' },
  payment: { icon: <CreditCard className="h-3.5 w-3.5" />, tone: 'bg-amber-500/15 text-amber-500' },
}

const DEFAULT_NOW = new Date('2026-08-08T12:00:00Z')

const DEFAULT_EVENTS: ActivityEvent[] = [
  {
    id: '1',
    kind: 'payment',
    actor: 'Northwind Ltd',
    action: 'upgraded to',
    target: 'Team annual',
    at: '2026-08-08T11:42:00Z',
  },
  {
    id: '2',
    kind: 'signup',
    actor: 'Marco Silva',
    action: 'created an account',
    at: '2026-08-08T09:15:00Z',
  },
  {
    id: '3',
    kind: 'comment',
    actor: 'Priya Raman',
    action: 'commented on',
    target: 'Billing migration',
    at: '2026-08-07T16:30:00Z',
  },
  {
    id: '4',
    kind: 'commit',
    actor: 'Alex Chen',
    action: 'pushed 3 commits to',
    target: 'main',
    at: '2026-08-07T08:05:00Z',
  },
  {
    id: '5',
    kind: 'signup',
    actor: 'Dana Whitfield',
    action: 'created an account',
    at: '2026-08-05T13:20:00Z',
  },
]

/** Coarse relative time — exact enough for a feed, no dependency needed. */
function relativeTime(iso: string, now: Date): string {
  const seconds = Math.round((now.getTime() - new Date(iso).getTime()) / 1000)
  const units: [number, Intl.RelativeTimeFormatUnit][] = [
    [60, 'second'],
    [3600, 'minute'],
    [86400, 'hour'],
    [604800, 'day'],
    [2629800, 'week'],
    [Infinity, 'month'],
  ]

  const divisors = [1, 60, 3600, 86400, 604800, 2629800]
  const format = new Intl.RelativeTimeFormat('en', { numeric: 'auto' })

  for (let i = 0; i < units.length; i += 1) {
    if (Math.abs(seconds) < units[i][0]) {
      return format.format(-Math.round(seconds / divisors[i]), units[i][1])
    }
  }
  return format.format(-Math.round(seconds / 2629800), 'month')
}

export function DashboardActivityFeed({
  events = DEFAULT_EVENTS,
  heading = 'Recent activity',
  now = DEFAULT_NOW,
  viewAllHref,
  className = '',
}: DashboardActivityFeedProps) {
  return (
    <section
      className={`rounded-2xl border border-border/60 bg-card/80 backdrop-blur ${className}`}
    >
      <div className="flex items-center justify-between gap-4 border-b border-border/60 px-5 py-4">
        <h2 className="font-semibold tracking-tight">{heading}</h2>
        {viewAllHref ? (
          <a
            href={viewAllHref}
            className="inline-flex items-center gap-1 text-sm text-muted-foreground transition-all hover:gap-2 hover:text-foreground"
          >
            View all
            <ArrowRight aria-hidden className="h-3.5 w-3.5 rtl:rotate-180" />
          </a>
        ) : null}
      </div>

      <ul className="divide-y divide-border/40">
        {events.map((event) => {
          const style = KIND_STYLE[event.kind]
          return (
            <li key={event.id} className="flex items-start gap-3 px-5 py-3.5 transition-colors hover:bg-muted/30">
              <span
                aria-hidden
                className={`mt-0.5 inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-lg ${style.tone}`}
              >
                {style.icon}
              </span>

              <div className="min-w-0 flex-1">
                <p className="text-sm leading-snug">
                  <span className="font-medium">{event.actor}</span>{' '}
                  <span className="text-muted-foreground">{event.action}</span>
                  {event.target ? <span className="font-medium"> {event.target}</span> : null}
                </p>
                <time
                  dateTime={event.at}
                  title={new Date(event.at).toUTCString()}
                  className="mt-0.5 block break-words text-xs text-muted-foreground"
                >
                  {relativeTime(event.at, now)}
                </time>
              </div>
            </li>
          )
        })}
      </ul>
    </section>
  )
}

Before you paste

  • Styling is Tailwind utility classes on semantic tokens (bg-card, text-muted-foreground) — it inherits your theme instead of overriding it.
  • Install: npm i lucide-react
  • Every prop has a default, so it renders standalone before you wire it up.

Where it goes

Drop it at components/dashboard-activity-feed.tsx and import it where you need the section:

import { DashboardActivityFeed } from '@/components/dashboard-activity-feed'

Customize

1 of this block’s props are simple enough to drive from here. Change them and the block below re-renders — it is the same component whose source is above, not a mock of it. Everything else it accepts is in the table underneath.

Props

Read out of the component’s own type and signature, so this cannot drift from the source below. Every prop has a default — the component renders standalone before you pass it anything.

PropTypeDefault
eventsActivityEvent[]DEFAULT_EVENTS
headingstring'Recent activity'
now"now" for relative formatting. Pass a fixed value to keep it testable.DateDEFAULT_NOW
viewAllHrefstring—
classNamestring''

Not using React?

The same block rendered once to markup, wrapped as a file your framework compiles. Tailwind classes are framework-agnostic, so the design transfers intact — the behaviour does not.

dashboard-activity-feed.html
<!--
  Activity Feed Panel — markup from the Hoverlab catalog.

  This is the block rendered once to HTML and wrapped as a component
  file. It is not a port of the React source: the Tailwind classes carry
  the design, which is the part that took the work, and they are the same
  in every framework.

  This block has no interactive behaviour, so nothing is missing.
-->
<section class="rounded-2xl border border-border/60 bg-card/80 backdrop-blur ">
  <div class="flex items-center justify-between gap-4 border-b border-border/60 px-5 py-4">
    <h2 class="font-semibold tracking-tight">Recent activity</h2>
  </div>
  <ul class="divide-y divide-border/40">
    <li class="flex items-start gap-3 px-5 py-3.5 transition-colors hover:bg-muted/30">
      <span aria-hidden="true" class="mt-0.5 inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-lg bg-amber-500/15 text-amber-500">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-credit-card h-3.5 w-3.5" aria-hidden="true">
          <rect width="20" height="14" x="2" y="5" rx="2"></rect>
          <line x1="2" x2="22" y1="10" y2="10"></line>
        </svg>
      </span>
      <div class="min-w-0 flex-1">
        <p class="text-sm leading-snug">
          <span class="font-medium">Northwind Ltd</span>
          <span class="text-muted-foreground">upgraded to</span>
          <span class="font-medium">Team annual</span>
        </p>
        <time dateTime="2026-08-08T11:42:00Z" title="Sat, 08 Aug 2026 11:42:00 GMT" class="mt-0.5 block break-words text-xs text-muted-foreground">18 minutes ago</time>
      </div>
    </li>
    <li class="flex items-start gap-3 px-5 py-3.5 transition-colors hover:bg-muted/30">
      <span aria-hidden="true" class="mt-0.5 inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-lg bg-emerald-500/15 text-emerald-500">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-user-plus h-3.5 w-3.5" aria-hidden="true">
          <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path>
          <circle cx="9" cy="7" r="4"></circle>
          <line x1="19" x2="19" y1="8" y2="14"></line>
          <line x1="22" x2="16" y1="11" y2="11"></line>
        </svg>
      </span>
      <div class="min-w-0 flex-1">
        <p class="text-sm leading-snug">
          <span class="font-medium">Marco Silva</span>
          <span class="text-muted-foreground">created an account</span>
        </p>
        <time dateTime="2026-08-08T09:15:00Z" title="Sat, 08 Aug 2026 09:15:00 GMT" class="mt-0.5 block break-words text-xs text-muted-foreground">3 hours ago</time>
      </div>
    </li>
    <li class="flex items-start gap-3 px-5 py-3.5 transition-colors hover:bg-muted/30">
      <span aria-hidden="true" class="mt-0.5 inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-lg bg-violet-500/15 text-violet-500">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-message-square h-3.5 w-3.5" aria-hidden="true">
          <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
        </svg>
      </span>
      <div class="min-w-0 flex-1">
        <p class="text-sm leading-snug">
          <span class="font-medium">Priya Raman</span>
          <span class="text-muted-foreground">commented on</span>
          <span class="font-medium">Billing migration</span>
        </p>
        <time dateTime="2026-08-07T16:30:00Z" title="Fri, 07 Aug 2026 16:30:00 GMT" class="mt-0.5 block break-words text-xs text-muted-foreground">20 hours ago</time>
      </div>
    </li>
    <li class="flex items-start gap-3 px-5 py-3.5 transition-colors hover:bg-muted/30">
      <span aria-hidden="true" class="mt-0.5 inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-lg bg-sky-500/15 text-sky-500">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-git-commit-horizontal h-3.5 w-3.5" aria-hidden="true">
          <circle cx="12" cy="12" r="3"></circle>
          <line x1="3" x2="9" y1="12" y2="12"></line>
          <line x1="15" x2="21" y1="12" y2="12"></line>
        </svg>
      </span>
      <div class="min-w-0 flex-1">
        <p class="text-sm leading-snug">
          <span class="font-medium">Alex Chen</span>
          <span class="text-muted-foreground">pushed 3 commits to</span>
          <span class="font-medium">main</span>
        </p>
        <time dateTime="2026-08-07T08:05:00Z" title="Fri, 07 Aug 2026 08:05:00 GMT" class="mt-0.5 block break-words text-xs text-muted-foreground">yesterday</time>
      </div>
    </li>
    <li class="flex items-start gap-3 px-5 py-3.5 transition-colors hover:bg-muted/30">
      <span aria-hidden="true" class="mt-0.5 inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-lg bg-emerald-500/15 text-emerald-500">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-user-plus h-3.5 w-3.5" aria-hidden="true">
          <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path>
          <circle cx="9" cy="7" r="4"></circle>
          <line x1="19" x2="19" y1="8" y2="14"></line>
          <line x1="22" x2="16" y1="11" y2="11"></line>
        </svg>
      </span>
      <div class="min-w-0 flex-1">
        <p class="text-sm leading-snug">
          <span class="font-medium">Dana Whitfield</span>
          <span class="text-muted-foreground">created an account</span>
        </p>
        <time dateTime="2026-08-05T13:20:00Z" title="Wed, 05 Aug 2026 13:20:00 GMT" class="mt-0.5 block break-words text-xs text-muted-foreground">3 days ago</time>
      </div>
    </li>
  </ul>
</section>
  • This is rendered HTML, not a translation of the React source. The Tailwind classes carry the design and work in any framework.
  • It is one frame: the component in its initial state, with no props applied beyond the defaults.
  • Requires Tailwind, and the design tokens the classes reference (bg-card, text-muted-foreground, and so on). The template ZIPs ship a globals.css that defines them.

What each framework gets across the whole catalog — effects convert properly; this rung is markup.

For AI

The component, its props, the design tokens it expects and the command that installs it — as one prompt. Paste it into Claude, Cursor, v0 or ChatGPT and what they build around it will match the rest of the catalog instead of inventing its own system.

See the prompt
Used in these pages
Want the whole screen instead of this one section? Open a page and copy it entire.
8 more blocks in Dashboards
All of them free to read, copy and install — no account, no locked tiles, no watermarked preview. The whole catalog is open, and so are the API and the CLI.
Browse Dashboards
Shipping one commercially
Copying the code is free. Putting it in client work or a paid product is what Pro is for — the licence, not the access.
  • A commercial licence for everything in the catalog
  • Unlimited bundle exports, in Vue, Svelte and Tailwind
  • One payment — no subscription, nothing to renew
Pro — $79 once
More Dashboards blocks
View category
Open the full page for this block
KPI Cards With Deltas
Metric row where each card knows whether a rise is good news, so churn going up is red while revenue going up is green.
Dashboards114 lines1 dep
Open the full page for this block
Kanban Board Columns
Four columns of prioritised, tagged, assigned task cards with a blocked state — the board as a layout contract, leaving drag behaviour to your own state and library.
Dashboards203 lines1 dep
Open the full page for this block
Audit Log Timeline
Events grouped by day on a vertical rail, icons varying by type and one entry expanded into a detail card — what keeps forty events scannable instead of forty gray dots.
Dashboards204 lines1 dep
Open the full page for this block
Saved View Tabs
Saved views with the third state most implementations drop: a shared view with unsaved edits, where Save changes what a colleague sees tomorrow. Two honest buttons instead of one, ownership on the tab, and dirty said in words.
Dashboards306 lines1 dep
Open the full page for this block
Comparison Period Picker
A reporting window with the comparison window spelled out beside it — resolved dates, UTC arithmetic, and an option to align weekdays so a weekend is never compared against a Tuesday.
Dashboards315 lines1 dep
Open the full page for this block
Alert Rule List
Threshold alerts with the two facts most rule lists omit: how often each has fired, and whether its channel is muted — so a rule that is on but delivering nowhere reads as its own state.
Dashboards282 lines1 dep