Audit Log React component for Tailwind CSS v4

Add to a project

Requirements: React 19 and Tailwind CSS v4, in Next.js (App Router or Pages), Vite or React Router. Installation guide · Next.js setup · Vite setup

Audit Log is part of Pro, with 298 more Pro items: $8 a month or $150 once. 14-day refund before you download any Pro item. See plans

Usage

Import AuditLog from @/components/ui/audit-log.

import { FilePlus2, FileX2, Pencil } from "lucide-react"
import { AuditLog, type AuditActionDef, type AuditEvent } from "@/components/ui/audit-log"

const actions: Record<string, AuditActionDef> = {
  "invoice.issued": { label: "issued", icon: <FilePlus2 />, tone: "info", group: "Invoices" },
  "invoice.cancelled": { label: "voided", icon: <FileX2 />, tone: "warning", group: "Invoices" },
  "client.updated": { label: "updated", icon: <Pencil />, group: "Clients" },
}

const events: AuditEvent[] = [
  {
    id: "e-1",
    at: "2026-09-24T16:35:00",
    actor: { id: "jessica", name: "Jessica Dunn", avatar: "/avatars/jessica.jpg" },
    action: "invoice.cancelled",
    target: { type: "invoice", id: "2026-0398", label: "Invoice #2026-0398", href: "/invoices/2026-0398" },
    severity: "warning",
    changes: [{ field: "status", label: "Status", type: "status", from: { label: "Issued", tone: "info" }, to: { label: "Voided", tone: "danger" } }],
    ip: "93.114.52.211",
    device: "Firefox · Windows",
  },
  {
    id: "e-2",
    at: "2026-09-24T16:12:00",
    actor: { id: "anna", name: "Anna Price" },
    action: "client.updated",
    target: { type: "client", id: "c04", label: "Greenleaf Pharmacy" },
    changes: [{ field: "balance", label: "Balance", type: "money", from: 7315.2, to: 0 }],
  },
]

export function ActivityLog() {
  return (
    <AuditLog
      events={events}
      actions={actions}
      targetTypes={{ invoice: "Invoice", client: "Client" }}
      currency="USD"
      exportFileName="activity-log"
      labels={{ search: "Search activity", export: "Download CSV" }}
    />
  )
}

Props

• events*
  AuditEvent[]

  The events, newest first ({ id, at, actor: { id, name, avatar?, kind? }, action, target?: { type, id, label, href? }, summary?, changes?, severity?, ip?, device?, location?, requestId?, metadata? }). Not sorted unless sortOrder says so.

• actions
  Record<string, AuditActionDef>

  Labels, icons, tones and groups per action key: { "invoice.cancelled": { label: "voided", icon, tone: "warning", group: "Invoices" } }. An unknown key prints the key.

• targetTypes
  Record<string, string>

  Record type names for the filter and the export: { invoice: "Invoice" }.

• modedefault "client"
  "client" | "server"

  client filters, searches and limits the period here. server leaves the events alone and only calls onQueryChange; pass the result and totalCount.

• onQueryChange
  (query: { search: string; period: DateRange | null; filter: FilterGroup }) => void

  Called 300ms after the search, the period or the filter last changed (never on mount).

• defaultSearchdefault ""
  string

  The search the log starts with. Use search / onSearchChange to control it.

• search
  string

  The search, controlled.

• onSearchChange
  (search: string) => void

  Every keystroke of the search.

• filter
  FilterGroup

  The filter, controlled (a lib/filters group).

• defaultFilter
  FilterGroup

  The filter the log starts with; an empty AND group by default.

• onFilterChange
  (filter: FilterGroup) => void

  Every change of the filter chips.

• filterFields
  FilterBuilderField<AuditEvent>[]

  The filterable fields. Default defaultAuditFilterFields(actions, the events' actors): user, action, record type, severity, IP.

• views
  FilterView[]

  Saved views in the builder's menu ("Deletions only", "Critical actions").

• period
  DateRange | null

  The period, controlled.

• defaultPeriod
  DateRange | null

  The period the log starts with; null shows everything.

• onPeriodChange
  (period: DateRange | null) => void

  A picked range, or null when cleared.

• groupByDaydefault true
  boolean

  Day headings ("Today", "Yesterday", "Monday, September 21") that stick under the table header. Events out of order land under their own day.

• sortOrderdefault "none"
  "desc" | "asc" | "none"

  none keeps the order you pass; desc and asc sort by time.

• expandabledefault true
  boolean

  Rows with changes or details expand into the before / after diff and the IP, device, location and request id.

• expandedKeys
  string[]

  The expanded event ids, controlled.

• defaultExpandedKeys
  string[]

  Event ids expanded at first.

• onExpandedKeysChange
  (keys: string[]) => void

  A row was opened or closed.

• timeFormatdefault "relative"
  "relative" | "time" | "datetime"

  relative: "5 min ago" today and the time under older day headings. time: the clock (with the date when not grouped). datetime: date and time.

• showIpdefault true
  boolean

  The IP column on desktop. The IP stays in the details either way.

• showSeveritydefault true
  boolean

  The severity column: notice, warning and critical as soft badges with an icon; info stays quiet.

• searchabledefault true
  boolean

  The search field at the start of the toolbar.

• filterabledefault true
  boolean

  The filter builder: chips on desktop, a Filters button with a bottom sheet on phones.

• showPerioddefault true
  boolean

  The period picker with quick ranges.

• exportabledefault true
  boolean

  The export button: onExport, or a CSV download of the events on screen. Disabled with no events.

• onExport
  (events: AuditEvent[], query: AuditLogQuery) => (void | Promise<unknown>)

  Replaces the built-in CSV (a server export). A returned promise shows the button loading; a rejection is announced.

• exportFileNamedefault "audit-log"
  string

  The CSV name before the date: "audit-log-2026-09-24.csv".

• csvDelimiterdefault ","
  "," | ";"

  The CSV separator. ";" opens straight in Excel set to a European locale, which reads "," as the decimal mark.

• onEventClick
  (event: AuditEvent) => void

  The record link's click when the target has no href.

• renderSummary
  (event: AuditEvent, parts: { actor: ReactNode; verb: ReactNode; target: ReactNode }) => ReactNode

  A custom sentence from the three parts. event.summary replaces the sentence for one event.

• densitydefault "default"
  "compact" | "default"

  Row height: 48px with a second line for times and actor kinds, or 36px on one line.

• radiusdefault "md"
  "none" | "sm" | "md" | "lg" | "full"

  Corners of the search, the period, the export and load-more buttons.

• tonedefault "neutral"
  "neutral" | "brand" | "success" | "warning" | "danger" | "info"

  The active filter chips and the period's selection.

• loadingdefault false
  boolean

  Skeleton rows with the real shape (feed rows on phones) in place of the events.

• skeletonCountdefault 8
  number

  How many skeleton rows loading shows (phones show at most 6).

• refreshingdefault false
  boolean

  Keeps the rows and shows a thin indeterminate bar at the top while a request runs.

• errordefault ""
  ReactNode

  Replaces the rows with an error state and a Try again button (onRetry). Text or a node is the message; true shows labels.error.

• onRetry
  () => (void | Promise<unknown>)

  The error state's Try again; a promise shows it loading.

• emptyState
  ReactNode

  Replaces the empty state when there are no events at all.

• hasMoredefault false
  boolean

  Shows Load more under the rows. Big logs page on the server with it.

• onLoadMore
  () => (void | Promise<unknown>)

  Loads the next page; a returned promise keeps the button loading.

• loadingMoredefault false
  boolean

  Shows Load more in its loading state (for a request started elsewhere).

• autoLoadMoredefault false
  boolean

  Loads the next page when the Load more button scrolls within 200px of view.

• maxRowsdefault 200
  number

  Renders at most this many events (0 renders all) and says so under the list. Beyond a few hundred, page on the server with hasMore.

• totalCount
  number

  The count in the toolbar when the server knows the total (server mode).

• currencydefault "USD"
  string

  ISO 4217 code for money changes without their own currency.

• now
  Date | number

  The reference time for relative times and day headings. Default: the current minute (useNow).

• localedefault ""
  string

  Dates, times, numbers and money. Empty uses the UIProvider locale, then the browser's.

• linkComponent
  (props: LinkComponentProps) => ReactNode

  The router link for record links (default the navigation provider's, else <a>).

• labels
  Partial<AuditLogLabels>

  Every string, English by default (DEFAULT_AUDIT_LOG_LABELS): search, period, export, count(n, formatted), column names, severities, expand / collapse, emptyValue, fieldCount, rangePresets, csvHeaders and more.

• filterBuilderProps
  Partial<FilterBuilderProps<AuditEvent>>

  Extra props for the filter builder: its labels, applyMode, onSaveView, defaultActiveViewId.

• dateRangePickerProps
  Partial<DateRangePickerProps>

  Extra props for the period picker: its labels, min, numberOfMonths, your own presets.

• classNames
  Partial<Record<"toolbar" | "search" | "period" | "filters" | "export" | "count" | "refreshing" | "table" | "group" | "row" | "details" | "diff" | "meta" | "feed" | "item" | "more" | "empty" | "error", string>>

  Extra classes for the inner parts.

• className
  string

  Extra classes for the root. Set --table-sticky-top here to sit the sticky header under an app bar.

Parts

FAQ

Used in

More React table and list components