EEnterUI
DocsComponentsThemesDonation
Get Started
      • DetailPanel
      • AuditLog
EnterUIDocsProduct OperationsProduct SurfacesDetail and AuditAuditLog
Product OperationsUpdated 6 May 2026

AuditLog

Product-ready timeline of audit events with title, kind badge, actor, timestamp, and description.

AuditLog is a focused timeline for activity / history feeds. Use it for audit logs, change history, or activity panes. For a more decorative timeline, use Timeline / ActivityFeed.

#Default usage

Two events

Pass an events array with id and title; everything else is optional.

  1. Workspace createdcreate
    Wandi2 days ago
  2. Settings updatedupdate

    Changed billing email

    Today
Code
<AuditLog
  events={[
    { id: "e1", kind: "create", title: "Workspace created", actor: "Wandi", timestamp: "2 days ago" },
    { id: "e2", kind: "update", title: "Settings updated", description: "Changed billing email", timestamp: "Today" }
  ]}
/>

#Import

Code
import { AuditLog, type AuditLogEvent } from "@froggdesign/enter-ui-react";

#Accessibility

AuditLog renders an ordered list (<ol>) so screen readers announce the position. Timestamps use <time> elements; pair with ISO strings via dateTime if you need machine-readable values.

#API

  • events: array of AuditLogEvent (id, title, optional kind, actor, timestamp, description).
  • dense: tighter typography for inspector / sidebar panels.

#Styling

Every exported component accepts className. EnterUI styles use .eui-* classes and --eui-* variables mapped from FroggDesign theme tokens.

PreviousDetailPanel
NextFormLayout

On this page

  1. Default usage
  2. Import
  3. Accessibility
  4. API
  5. Styling