Product 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.

204 lineslucide-reactAdded 13 Aug 2026Updated 11 Sept 2026

audit log
timeline
events
history
activity

What's included

components/activity-timeline.tsx
Needs lucide-react

Works with

React
Next.js
Tailwind CSS
TypeScript

npx hoverlab add activity-timeline

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

Activity

Today, Aug 13

Alex Chen deployed web@2026.08.13-r2
14:05
Priya Raman changed retention in audit-log config
11:20
- retention_days: 30
+ retention_days: 90
Dana Whitfield commented on Billing migration RFC
09:42

Yesterday

Rosa Martínez invited jonas@acme.dev
16:30
Sam Okafor resolved INC-208: elevated 5xx on api-eu
08:15

Aug 10

Alex Chen rolled back web@2026.08.10-r1
19:47
Priya Raman enabled SSO enforcement
10:05

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

Source

components/activity-timeline.tsx

/**
 * <ActivityTimeline> — an audit log grouped by day.
 *
 * Forty events in a flat list of identical grey dots is technically a
 * timeline and practically unreadable. Two decisions carry all the weight
 * here: events sit under day headings, so "when" is answered by position
 * before you read a single row; and the node icon varies by event type,
 * so a deploy, an incident and a settings change stay distinguishable
 * mid-scroll. Detail attaches inline, in a card under its own row — never
 * a modal, which would cost the reader their place in the sequence.
 */

import * as React from 'react'
import { Rocket, MessageSquare, UserPlus, Settings2, Siren } from 'lucide-react'

export type TimelineKind = 'deploy' | 'comment' | 'member' | 'settings' | 'incident'

export interface TimelineEvent {
  id: string
  kind: TimelineKind
  actor: string
  /** Verb phrase — the actor's name is prefixed automatically. */
  action: string
  target?: string
  /** ISO timestamp; the visible label is the short form. */
  at: string
  timeLabel: string
  /** Optional inline detail card, e.g. a two-line config diff. */
  detail?: { removed: string; added: string }
}

export interface TimelineGroup {
  label: string
  events: TimelineEvent[]
}

export interface ActivityTimelineProps {
  groups?: TimelineGroup[]
  heading?: string
  className?: string
}

const KIND_STYLE: Record<TimelineKind, { icon: React.ReactNode; tone: string }> = {
  deploy: { icon: <Rocket 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',
  },
  member: { icon: <UserPlus className="h-3.5 w-3.5" />, tone: 'bg-emerald-500/15 text-emerald-500' },
  settings: {
    icon: <Settings2 className="h-3.5 w-3.5" />,
    tone: 'bg-amber-500/15 text-amber-500',
  },
  incident: { icon: <Siren className="h-3.5 w-3.5" />, tone: 'bg-destructive/15 text-destructive' },
}

const DEFAULT_GROUPS: TimelineGroup[] = [
  {
    label: 'Today, Aug 13',
    events: [
      {
        id: '1',
        kind: 'deploy',
        actor: 'Alex Chen',
        action: 'deployed',
        target: 'web@2026.08.13-r2',
        at: '2026-08-13T14:05:00Z',
        timeLabel: '14:05',
      },
      {
        id: '2',
        kind: 'settings',
        actor: 'Priya Raman',
        action: 'changed retention in',
        target: 'audit-log config',
        at: '2026-08-13T11:20:00Z',
        timeLabel: '11:20',
        detail: { removed: 'retention_days: 30', added: 'retention_days: 90' },
      },
      {
        id: '3',
        kind: 'comment',
        actor: 'Dana Whitfield',
        action: 'commented on',
        target: 'Billing migration RFC',
        at: '2026-08-13T09:42:00Z',
        timeLabel: '09:42',
      },
    ],
  },
  {
    label: 'Yesterday',
    events: [
      {
        id: '4',
        kind: 'member',
        actor: 'Rosa Martínez',
        action: 'invited',
        target: 'jonas@acme.dev',
        at: '2026-08-12T16:30:00Z',
        timeLabel: '16:30',
      },
      {
        id: '5',
        kind: 'incident',
        actor: 'Sam Okafor',
        action: 'resolved',
        target: 'INC-208: elevated 5xx on api-eu',
        at: '2026-08-12T08:15:00Z',
        timeLabel: '08:15',
      },
    ],
  },
  {
    label: 'Aug 10',
    events: [
      {
        id: '6',
        kind: 'deploy',
        actor: 'Alex Chen',
        action: 'rolled back',
        target: 'web@2026.08.10-r1',
        at: '2026-08-10T19:47:00Z',
        timeLabel: '19:47',
      },
      {
        id: '7',
        kind: 'settings',
        actor: 'Priya Raman',
        action: 'enabled',
        target: 'SSO enforcement',
        at: '2026-08-10T10:05:00Z',
        timeLabel: '10:05',
      },
    ],
  },
]

export function ActivityTimeline({
  groups = DEFAULT_GROUPS,
  heading = 'Activity',
  className = '',
}: ActivityTimelineProps) {
  return (
    <section className={`rounded-2xl border border-border/60 bg-card/80 p-5 backdrop-blur ${className}`}>
      <h2 className="font-semibold tracking-tight">{heading}</h2>

      <div className="mt-4 space-y-6">
        {groups.map((group) => (
          <div key={group.label}>
            {group.label ? (
              <h3
                data-stress-ignore
                className="mb-3 text-xs font-semibold uppercase tracking-wide text-muted-foreground"
              >
                {group.label}
              </h3>
            ) : null}

            <ul className="relative ms-3.5 space-y-4 border-s border-border/60 ps-6">
              {group.events.map((event) => {
                const style = KIND_STYLE[event.kind]
                return (
                  <li key={event.id} className="relative">
                    <span
                      aria-hidden
                      className={`absolute -start-[2.35rem] top-0 inline-flex h-7 w-7 items-center justify-center rounded-full ring-4 ring-background ${style.tone}`}
                    >
                      {style.icon}
                    </span>

                    <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 text-primary underline-offset-2 hover:underline">
                          {' '}
                          {event.target}
                        </span>
                      ) : null}
                    </p>
                    <time dateTime={event.at} className="mt-0.5 block text-xs text-muted-foreground">
                      {event.timeLabel}
                    </time>

                    {event.detail ? (
                      <div className="mt-2 rounded-lg border border-border/60 bg-muted/40 p-3 font-mono text-xs leading-relaxed">
                        <p className="text-destructive">- {event.detail.removed}</p>
                        <p className="text-emerald-600 dark:text-emerald-400">
                          + {event.detail.added}
                        </p>
                      </div>
                    ) : null}
                  </li>
                )
              })}
            </ul>
          </div>
        ))}
      </div>
    </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/activity-timeline.tsx and import it where you need the section:

import { ActivityTimeline } from '@/components/activity-timeline'

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.

Prop	Type	Default
`groups`	`TimelineGroup[]`	`DEFAULT_GROUPS`
`heading`	`string`	`'Activity'`
`className`	`string`	`''`

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.

activity-timeline.html

<!--
  Audit Log Timeline — 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 p-5 backdrop-blur ">
  <h2 class="font-semibold tracking-tight">Activity</h2>
  <div class="mt-4 space-y-6">
    <div>
      <h3 data-stress-ignore="true" class="mb-3 text-xs font-semibold uppercase tracking-wide text-muted-foreground">Today, Aug 13</h3>
      <ul class="relative ms-3.5 space-y-4 border-s border-border/60 ps-6">
        <li class="relative">
          <span aria-hidden="true" class="absolute -start-[2.35rem] top-0 inline-flex h-7 w-7 items-center justify-center rounded-full ring-4 ring-background 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-rocket h-3.5 w-3.5" aria-hidden="true">
              <path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z"></path>
              <path d="m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z"></path>
              <path d="M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0"></path>
              <path d="M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5"></path>
            </svg>
          </span>
          <p class="text-sm leading-snug">
            <span class="font-medium">Alex Chen</span>
            <span class="text-muted-foreground">deployed</span>
            <span class="font-medium text-primary underline-offset-2 hover:underline">web@2026.08.13-r2</span>
          </p>
          <time dateTime="2026-08-13T14:05:00Z" class="mt-0.5 block text-xs text-muted-foreground">14:05</time>
        </li>
        <li class="relative">
          <span aria-hidden="true" class="absolute -start-[2.35rem] top-0 inline-flex h-7 w-7 items-center justify-center rounded-full ring-4 ring-background 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-settings2 lucide-settings-2 h-3.5 w-3.5" aria-hidden="true">
              <path d="M14 17H5"></path>
              <path d="M19 7h-9"></path>
              <circle cx="17" cy="17" r="3"></circle>
              <circle cx="7" cy="7" r="3"></circle>
            </svg>
          </span>
          <p class="text-sm leading-snug">
            <span class="font-medium">Priya Raman</span>
            <span class="text-muted-foreground">changed retention in</span>
            <span class="font-medium text-primary underline-offset-2 hover:underline">audit-log config</span>
          </p>
          <time dateTime="2026-08-13T11:20:00Z" class="mt-0.5 block text-xs text-muted-foreground">11:20</time>
          <div class="mt-2 rounded-lg border border-border/60 bg-muted/40 p-3 font-mono text-xs leading-relaxed">
            <p class="text-destructive">- retention_days: 30</p>
            <p class="text-emerald-600 dark:text-emerald-400">+ retention_days: 90</p>
          </div>
        </li>
        <li class="relative">
          <span aria-hidden="true" class="absolute -start-[2.35rem] top-0 inline-flex h-7 w-7 items-center justify-center rounded-full ring-4 ring-background 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>
          <p class="text-sm leading-snug">
            <span class="font-medium">Dana Whitfield</span>
            <span class="text-muted-foreground">commented on</span>
            <span class="font-medium text-primary underline-offset-2 hover:underline">Billing migration RFC</span>
          </p>
          <time dateTime="2026-08-13T09:42:00Z" class="mt-0.5 block text-xs text-muted-foreground">09:42</time>
        </li>
      </ul>
    </div>
    <div>
      <h3 data-stress-ignore="true" class="mb-3 text-xs font-semibold uppercase tracking-wide text-muted-foreground">Yesterday</h3>
      <ul class="relative ms-3.5 space-y-4 border-s border-border/60 ps-6">
        <li class="relative">
          <span aria-hidden="true" class="absolute -start-[2.35rem] top-0 inline-flex h-7 w-7 items-center justify-center rounded-full ring-4 ring-background 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>
          <p class="text-sm leading-snug">
            <span class="font-medium">Rosa Martínez</span>
            <span class="text-muted-foreground">invited</span>
            <span class="font-medium text-primary underline-offset-2 hover:underline">jonas@acme.dev</span>
          </p>
          <time dateTime="2026-08-12T16:30:00Z" class="mt-0.5 block text-xs text-muted-foreground">16:30</time>
        </li>
        <li class="relative">
          <span aria-hidden="true" class="absolute -start-[2.35rem] top-0 inline-flex h-7 w-7 items-center justify-center rounded-full ring-4 ring-background bg-destructive/15 text-destructive">
            <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-siren h-3.5 w-3.5" aria-hidden="true">
              <path d="M7 18v-6a5 5 0 1 1 10 0v6"></path>
              <path d="M5 21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-1a2 2 0 0 0-2-2H7a2 2 0 0 0-2 2z"></path>
              <path d="M21 12h1"></path>
              <path d="M18.5 4.5 18 5"></path>
              <path d="M2 12h1"></path>
              <path d="M12 2v1"></path>
              <path d="m4.929 4.929.707.707"></path>
              <path d="M12 12v6"></path>
            </svg>
          </span>
          <p class="text-sm leading-snug">
            <span class="font-medium">Sam Okafor</span>
            <span class="text-muted-foreground">resolved</span>
            <span class="font-medium text-primary underline-offset-2 hover:underline">INC-208: elevated 5xx on api-eu</span>
          </p>
          <time dateTime="2026-08-12T08:15:00Z" class="mt-0.5 block text-xs text-muted-foreground">08:15</time>
        </li>
      </ul>
    </div>
    <div>
      <h3 data-stress-ignore="true" class="mb-3 text-xs font-semibold uppercase tracking-wide text-muted-foreground">Aug 10</h3>
      <ul class="relative ms-3.5 space-y-4 border-s border-border/60 ps-6">
        <li class="relative">
          <span aria-hidden="true" class="absolute -start-[2.35rem] top-0 inline-flex h-7 w-7 items-center justify-center rounded-full ring-4 ring-background 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-rocket h-3.5 w-3.5" aria-hidden="true">
              <path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z"></path>
              <path d="m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z"></path>
              <path d="M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0"></path>
              <path d="M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5"></path>
            </svg>
          </span>
          <p class="text-sm leading-snug">
            <span class="font-medium">Alex Chen</span>
            <span class="text-muted-foreground">rolled back</span>
            <span class="font-medium text-primary underline-offset-2 hover:underline">web@2026.08.10-r1</span>
          </p>
          <time dateTime="2026-08-10T19:47:00Z" class="mt-0.5 block text-xs text-muted-foreground">19:47</time>
        </li>
        <li class="relative">
          <span aria-hidden="true" class="absolute -start-[2.35rem] top-0 inline-flex h-7 w-7 items-center justify-center rounded-full ring-4 ring-background 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-settings2 lucide-settings-2 h-3.5 w-3.5" aria-hidden="true">
              <path d="M14 17H5"></path>
              <path d="M19 7h-9"></path>
              <circle cx="17" cy="17" r="3"></circle>
              <circle cx="7" cy="7" r="3"></circle>
            </svg>
          </span>
          <p class="text-sm leading-snug">
            <span class="font-medium">Priya Raman</span>
            <span class="text-muted-foreground">enabled</span>
            <span class="font-medium text-primary underline-offset-2 hover:underline">SSO enforcement</span>
          </p>
          <time dateTime="2026-08-10T10:05:00Z" class="mt-0.5 block text-xs text-muted-foreground">10:05</time>
        </li>
      </ul>
    </div>
  </div>
</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

Sidebar Dashboard Shell

Sidebar, top bar and scrollable content slot, with a mobile drawer that closes on Escape and marks the active route.

Dashboards218 lines1 dep11 Sept

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

Activity Feed Panel

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

Dashboards171 lines1 dep10 Sept

Page Header With Tabs

Breadcrumb, title, action buttons and a counted tab row that sits flush with the bottom rule.

Dashboards150 lines1 dep10 Sept

Backlog

HighHL-341
Rate-limit the export endpoint
apiinfra
ACAlex ChenAug 19
MediumHL-338
Empty-state illustrations for search
design
DWDana WhitfieldAug 21
LowHL-329
Migrate billing webhooks to v2
billing
RMRosa MartínezAug 25

In progress

HighHL-322
Checkout: support SEPA direct debit
payments
PRPriya Raman#482
MediumHL-318
Rotate staging TLS certificates
Blocked — Waiting on DNS delegation
infra
SOSam OkaforAug 14
MediumHL-325
New onboarding checklist
growth
JWJonas WeberAug 15

In review

HighHL-314
Fix duplicate invoice emails
billing
RMRosa Martínez#479
LowHL-311
Dashboard loading skeletons
design
DWDana Whitfield#476

Done

MediumHL-306
Upgrade CI runners to Node 22
infra
ACAlex ChenAug 11
HighHL-302
Search relevance tuning
search
PRPriya RamanAug 12

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 dep10 Sept

Support queue

One filter has been added to this view: Enterprise only

All open is shared with your team. Saving changes what everyone sees, including tomorrow's scheduled digest.

Filters in this view

Status is open
Any assignee
Last 30 days
Enterprise only

Narrow it further

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 dep2 Sept

Reporting period

Every percentage on this dashboard is measured against the comparison window below.

Compare against

Previous periodThe window immediately before this one.Same period last yearThe same calendar dates, one year back.No comparisonShow absolute numbers with no deltas.

Aug 4 – Aug 31, 2026Jul 7 – Aug 3, 2026

Align to the same weekdays. Off — the comparison is the window immediately before this one, which can land a weekend against weekdays.

Both windows are inclusive of their end dates and computed in UTC, so a change of clocks never produces a week of six days and 23 hours.

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

Alert rules

4 of 5 active · 1 delivering nowhere

critical
API error rate
Alert when API error rate stays above 2% for 5 minutes.
#incidentsFired 3 times in the last 30 days
warning
p95 latency
Alert when p95 latency stays above 800ms for 15 minutes.
#platform-alertsFired 27 times in the last 30 days
This rule is on, but #platform-alerts is muted — nothing has been delivered since it was muted.
warning
Signups per hour
Alert when Signups per hour stays below 4 for 1 hour.
growth@acme.comFired 142 times in the last 30 days
Firing 142 times a month is usually a threshold problem rather than an incident. Consider raising it before muting the channel.
critical
Job queue depth
Alert when Job queue depth stays above 5,000 for 10 minutes.
pagerduty.com/…/v2Fired 1 times in the last 30 days
info
Storage used
Alert when Storage used stays above 85% for 1 day.
ops@acme.comFired 0 times in the last 30 days

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 dep11 Sept