Audit log

A React block (a whole screen) in Beamline's Blocks category.

Who did what, to what, when and from where, for a whole workspace: newest first and grouped by day, people with avatars and keys or systems with toned marks, sensitive actions flagged; filter by words, area, person and dates; open an entry for exactly what changed (before → after) and its request id; new entries wait above the list until shown; older pages load on demand; export the filtered log as CSV or JSON.

Use it for

The Audit log or Security events page of a B2B product: admins and auditors find who changed what.
Any append-only record of actions people and systems took, filtered and exported.

Not for

A record's own history in its side panel (timeline).
Application logs and traces for engineers (a log viewer).
A person's notifications (notification-center).

Anatomy

header: title, how far back the log goes, Export (CSV or JSON of what the filters show)
filters: words (actor, action, target, address), areas as chips with counts, person, date range; Clear filters when any is set
new entries: “Show 3 new entries” above the list (nothing moves under the reader until asked)
entries by day: actor (initials avatar for a person; a key or system mark), what they did and to what, Sensitive on risky actions; address and place; Details opens what changed (field: before → after) and the request id with Copy
footer: Load older entries, or “That's everything” with the count

States

loading (rows in the timeline's shape); load failed (Try again)
no entries yet; no entry matches (Clear filters)
new entries waiting; shown (they arrive at the top)
loading older; no more
exporting (busy), exported (toast), export failed
partial data: an entry without address or changes shows what it has; an unknown actor reads Unknown

Keyboard

Tab: Export, search, area chips, person, dates, then each entry's Details
/ focuses the search; Esc clears it
Details opens and closes with Enter or Space; Copy request id is a button

Motion

New entries grow in at the top when shown; filtered entries settle without travel (a filter is a new view, not a move). Area chips fill and grow a check. Details open to their height. Export's label becomes a spinner, then the toast. Reduced motion places everything at once.

Props

Prop	Type	Default	Description
`entries / defaultEntries / onEntriesChange` (required)	`AuditEntry[]`	—	Newest first: id, at, actor { name, kind, avatar? }, action, area, summary, target, ip, place, sensitive, changes, requestId.
`areas`	`{ id, label }[]`	—	The areas entries belong to (People, Billing, Security …), for the chips.
`incoming`	`AuditEntry[]`	—	Entries that arrived since the list was shown; Show N new adds them.
`onShowIncoming`	`() => void`	—	Called when they are shown, so you can clear them.
`onLoadOlder / hasOlder`	`() => Promise<AuditEntry[]> / boolean`	—
`onExport`	`(entries: AuditEntry[], format: "csv" \| "json") => Promise<void>`	—	Gets the entries the filters show.
`onFiltersChange`	`(filters: AuditFilters) => void`	—	For filtering on your server as well.
`retention`	`string`	—	How far back the log goes, in words ("Kept for 1 year").
`loading / error / onRetry`	`boolean / ReactNode / () => void \| Promise<unknown>`	—
`level`	`1 \| 2`	—
`className / classNames / style / ref`	`string / AuditLogClassNames / CSSProperties / Ref<HTMLDivElement>`	—

Built from

Dependencies

lucide-react, motion

Import

import { AuditLog } from "@/blocks/audit-log/audit-log";

Get it

Audit log is part of Beamline: 200+ components and 50+ complete screens for React that your coding agent (Claude Code, Codex, Cursor or any MCP client) installs into your app through Beamline's MCP server, as a ready-built package or as plain React source you can change. $49 launch price, one payment, no subscription, lifetime updates, one licence for your whole team. Get Beamline · Connect your agent