ComponentsData display

Audit log

The full ledger of who did what, when and from where — sign-ins, permission changes, exports, deletes. Filter by text, actor, action and severity, expand an event for its field diff, JSON diff and raw payload, and scroll thousands of rows: long logs are virtualized while keeping native table semantics.

@tanstack/react-virtual + native <table> (one <tbody> per event) components/audit-log.tsx, components/version-history.tsx, styles/data.csstheme · material · accent · density · font

8 eventsShowing the last 90 days · times in UTC

Time	Actor	Action	Target	Source
Nov 10, 202609:14:07 AM UTC	Ayşe KayaUser	Changed roleWarning`user.role.updated`	Daniel BrooksUser · usr_482	88.230.14.7Istanbul, TR
Nov 10, 202608:58:41 AM UTC	Mehmet YılmazUser	Disabled two-factorCritical`auth.mfa.disabled`	Mehmet YılmazUser · usr_311	176.88.40.211Ankara, TR
Nov 10, 202608:02:55 AM UTC	Zapier syncAPI key	Created contact`contact.created`	Jane CooperContact · con_1209	54.86.50.139Ashburn, US
Nov 10, 202607:41:18 AM UTC	Daniel BrooksUser	Updated deal`deal.updated`	Northwind renewal 2027Deal · deal_118	88.230.14.9Istanbul, TR
Nov 9, 202610:41:10 PM UTC	Nightly exportSystem	Exported dataWarning`export.created`	All contacts (CSV · 12,408 rows)Export · exp_77	—
Nov 9, 202605:20:33 PM UTC	İlker ŞahinUser	Deleted post`post.deleted`	Summer menu launch (draft)Post · post_77	95.70.180.3Izmir, TR
Nov 9, 202603:02:09 PM UTC	UnknownSystem	Failed sign-inCritical`auth.login.failed`	daniel.brooks@vamos.istUser · usr_482	185.220.101.44Frankfurt, DE
Nov 9, 202609:00:12 AM UTC	Ayşe KayaUser	Created API key`apiKey.created`	Zapier syncApiKey · key_zap_02	88.230.14.7Istanbul, TR

Installation

$ pnpm add @vamos-ui/react

The whole kit as one package — get updates by bumping the version. Add the styles to globals.css: @import "@vamos-ui/react/styles.css";

Usage

import { AuditLog } from "@vamos-ui/react";

<AuditLog
  events={events}
  actionLabels={{ "user.role.updated": "Changed role", "export.created": "Exported data" }}
  notice="Showing the last 90 days"
  hasMore={hasMore}
  onLoadMore={fetchOlder}
/>

Rows expand with a labelled button (aria-expanded + aria-controls). Raw JSON sits in a focusable <pre> with a copy button. No row, header or tooltip is blurred in glass mode.

Examples

Event detail

Field or JSON diff of the change, ids with copy buttons, client, and the raw event.

Changes

Field	Before	After
RoleChanged	~~Editor~~	Admin
PermissionsChanged	~~posts.write~~	posts.write, users.manage, billing.view

Details

Event ID: evt_8f21a0
Request ID: req_9f2c41d7
IP address: 88.230.14.7
Client: Chrome 131 on macOS 15
Reason: Covering for team lead during leave

Server mode, 2,000 events

manualFiltering + onFiltersChange for your API; rowCount gives "250 of 2,000"; scrolling near the end calls onLoadMore.

250 of 2,000 eventsVirtualized · loads 250 at a time

Details	Time	Actor	Action	Target	Source

One record's history

variant="timeline" renders into Activity timeline with the field diff as the body.

Ayşe Kaya changed role · Daniel Brooks
11/10/26, 9:14 AM
Field Before After
RoleChanged ~~Editor~~ Admin
PermissionsChanged ~~posts.write~~ posts.write, users.manage, billing.view
Unknown failed sign-in · daniel.brooks@vamos.ist
11/9/26, 3:02 PM

API

AuditLog

Prop	Type	Default
`events` Events, newest first.	`AuditEvent[]`	`—`
`actionLabels` "user.role.updated" → "Changed role". Missing codes are humanized.	`Record<string, string>`	`—`
`changeFields` Labels and formats for the change diff.	`FieldDiffField[]`	`—`
`filters / defaultFilters / onFiltersChange` { q, actorId, action, severity } — controlled or not.	`AuditFilters / … / (filters) => void`	`—`
`manualFiltering` Server mode: events are already filtered.	`boolean`	`false`
`rowCount` Server total for "50 of 12,408 events".	`number`	`—`
`showFilters` Built-in filter row.	`boolean`	`true`
`toolbar` Extra filters (a Date range picker).	`ReactNode`	`—`
`notice` Retention or scope notice.	`ReactNode`	`—`
`onExport` Export button with the visible events.	`(events) => void`	`—`
`hasMore / onLoadMore` Infinite scroll plus a "Load older events" button.	`boolean / () => void \| Promise<void>`	`—`
`loading` Busy indicator in the summary.	`boolean`	`false`
`height` Scroll viewport height.	`string`	`"32rem"`
`virtualizeAfter` Virtualize above this many events.	`number`	`80`
`variant` Full ledger or a compact record feed.	`"table" \| "timeline"`	`"table"`
`labels` All built-in strings.	`Partial<AuditLogLabels>`	`—`

AuditEvent

Prop	Type	Default
`id / at` Identity and time.	`string / ISO instant`	`—`
`actor` Who did it.	`{ id; name; type: "user" \| "api-key" \| "system"; avatar? }`	`—`
`action` Dotted code; filtering by "user" matches "user.*".	`string`	`—`
`target` What it was done to.	`{ type; id; label? }`	`—`
`ip / location / userAgent` Where from (mono, left-to-right).	`string`	`—`
`changes` Field diff in the detail.	`{ before; after }`	`—`
`metadata` requestId gets a copy row; the rest is listed.	`Record<string, unknown>`	`—`
`severity` Badge and edge marker.	`"info" \| "warning" \| "critical"`	`"info"`

Parts and helpers

Prop	Type	Default
`AuditEventDetail` The expanded content on its own (drawer, page).	`{ event, changeFields }`	`—`
`filterAuditEvents(events, filters, locale?, actionLabels?)` The local filter, also usable on the server.	`AuditEvent[]`	`—`

Attachment list

Avatar