Elements Pro launch: $79 for the first 50 with LAUNCH50 · $129 standard.

Components / Blocks / AuditActivityFeed

AuditActivityFeed.

ProBlockGovernancev0.1.0

A responsive audit timeline with local search, category filtering, event counts and a clear empty state. You supply already-authorized events and an optional pagination action.

Get Elements Pro
Demo dataResponsive
Governance

Audit activity

Searchable workspace events with actor and target context.

3 events

3 matching events

  1. SC

    Sarah Chen changed the role for James Park

    Viewer → Member

    access
  2. DS

    Dan Schoonmaker exported Operations Registry

    248 records · CSV

    data
  3. SY

    System processed payment for Pro subscription

    $29.00 · paid

    billing

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-activity-feed

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

  • components/elements-pro/audit-activity-feed.tsxblock
  • components/ui/button.tsxui
  • components/ui/badge.tsxui
  • components/ui/card.tsxui
  • components/ui/input.tsxui
  • components/ui/native-select.tsxui
Dependencies@base-ui/reactclass-variance-authorityclsxlucide-reacttailwind-merge

API

PropTypeDefaultDescription
events (required)AuditEvent[]—Events the viewer is allowed to see.
onLoadMore() => void—Shows a Load more action for server pagination.

AuditEvent

PropTypeDefaultDescription
id (required)string—
actor (required)string—
initials (required)string—
action (required)string—
target (required)string—
category (required)'access' | 'data' | 'billing' | 'settings'—
timestamp (required)string—Rendered as given inside a <time> element.
detailstring—

Accessibility

  • Search and category filter have screen-reader labels.
  • The visible event count is announced politely as filters change.
  • Events render as an ordered list with machine-readable <time> values.