AuditExplorer.

ProBlockGovernancev0.2.0

A filterable audit table with a before and after inspector. Redacted fields never reach the browser, and exports receive the same filters as the visible table.

Get Elements Pro

Demo dataResponsive

Audit log

3 of 3 events

Time	Actor	Category
2026-10-14 10:42	Elena Torres	access
2026-10-14 09:15	Maya Chen	members
2026-10-14 08:02	Elena Torres	security

Event detail

Elena Torres changed the role of Maya Chen

Event: EVT-9314
Time: 2026-10-14 10:42
IP address: 203.0.113.24

FieldBeforeAfter

RoleMemberAdmin

Recovery emailRedacted

Installation

Add the licensed registry once. Keep your license key in the project’s uncommitted environment.

components.json

{
  "registries": {
    "@elements-pro": {
      "headers": {
        "Authorization": "Bearer ${ELEMENTS_PRO_LICENSE_KEY}"
      },
      "url": "https://pro.elements.micropreneur.dev/r/{name}.json"
    }
  }
}

export ELEMENTS_PRO_LICENSE_KEY=mpro_...

pnpm dlx shadcn@latest add @elements-pro/audit-explorer

The shadcn CLI writes the source into your project. Files added:

components/elements-pro/audit-explorer.tsxblock
components/ui/badge.tsxui
components/ui/button.tsxui
components/ui/card.tsxui
components/ui/input.tsxui
components/ui/native-select.tsxui
components/ui/table.tsxui

Dependencies@base-ui/reactclass-variance-authorityclsxlucide-reacttailwind-merge

API

Prop	Type	Default	Description
events (required)	AuditExplorerEvent[]	—	Events the viewer may see, with optional field changes.
onExport	(filters) => void \| Promise<void>	—	Export what the current filters show.
onLoadMore	() => void	—	Shows a control to load older events.

AuditChange

Prop	Type	Default	Description
field (required)	string	—
before	string	—
after	string	—
redacted	boolean	—	Shows "Redacted" instead of values.

Accessibility

Actor and category filters and the search field have labels.
The event count updates through a polite live region as filters change.
Before and after values carry hidden labels so screen readers know which is which.