Audit Log

Component 83

About

A timestamped activity log that lists product and registry events with actor, type and status tags, per-row context menu actions, and optional field filters.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Audit Log to your project and fits it to your theme.

Code

How Audit Log is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import * as React from "react";
import { AuditLog } from "@/components/ui/audit-log";
import type { AuditLogItem } from "@/components/ui/audit-log";
import {
  GitCommitVertical,
  KeyRound,
  ShieldCheck,
  Trash2,
  UserPlus,
} from "lucide-react";

const items: AuditLogItem[] = [
  {
    id: "1",
    title: "Deployed registry v2.4.0",
    description: "Promoted the release candidate to production.",
    timestamp: "2m ago",
    actor: "Jordan Lee",
    type: "deploy",
    status: "success",
    icon: <GitCommitVertical className="size-3" />,
  },
  {
    id: "2",
    title: "Invited a new team member",
    description: "sam@corr.sh was added to the Engineering workspace.",
    timestamp: "1h ago",
    actor: "Priya Nair",
    type: "member",
    status: "pending",
    icon: <UserPlus className="size-3" />,
  },
  {
    id: "3",
    title: "Rotated API signing key",
    description: "Previous key revoked immediately.",
    timestamp: "3h ago",
    actor: "System",
    type: "security",
    status: "success",
    icon: <KeyRound className="size-3" />,
  },
  {
    id: "4",
    title: "Updated access policy",
    description: "Enabled two-factor requirement for all admins.",
    timestamp: "Yesterday",
    actor: "Priya Nair",
    type: "security",
    status: "success",
    icon: <ShieldCheck className="size-3" />,
  },
  {
    id: "5",
    title: "Deleted staging database",
    description: "Scheduled cleanup removed an unused instance.",
    timestamp: "2 days ago",
    actor: "System",
    type: "maintenance",
    status: "failed",
    icon: <Trash2 className="size-3" />,
  },
];

export default function AuditLogDemo() {
  return (
    <div className="mx-auto w-full max-w-xl p-6">
      <AuditLog items={items} />
    </div>
  );
}