Activity Log
NewInstallation
npx shadcn@latest add https://uibrik.com/r/activity-log.jsonInstall the packages
npm install @tabler/icons-react motionAdd the cn helper
Imports
cnfrom@/lib/utils, whichshadcn initcreates. Add it by hand without shadcn.Copy the source into your project
components/uibrik/activity-log/activity-log.tsx"use client"; import { useCallback, useMemo, useState, type ReactNode } from "react"; import { motion, useReducedMotion } from "motion/react"; import { IconCopy, IconDownload, IconSearch } from "@tabler/icons-react"; import { cn } from "@/lib/utils"; import { Avatar, Button, CHIP, Dialog, EASE_OUT, EmptyState, FOCUS, Input, PageHeader, Panel, PanelButton, SHELL, Select, TILE, Tabs, ago, useToast,
Adds the files to
components/uibrik/activity-log and installs @tabler/icons-react and motion. With the @uibrik namespace set up: npx shadcn@latest add @uibrik/activity-log.Props
ActivityLog- title
- Type string
- "Activity"
- Names the page.
- groupByDay
- Type boolean
- true
- Groups entries under Today, Yesterday and dates.
- showLocation
- Type boolean
- true
- Shows where each event came from.
- entries
- Type { id: string; actor: string; avatar?: string; action: string; target?: string; detail?: string; type: "members" | "billing" | "security" | "deploys"; event: string; minutesAgo: number; ip?: string; location?: string; userAgent?: string; metadata?: Record<string, unknown> }[]
- –
- Log entries, read as “actor action target detail”. Times are minutes before `now`.
- now
- Type Date
- Oct 17 2026, 14:20
- The moment entries count back from; fixed so server and client agree.
- description
- Type string
- –
- One line under the title.
- onExport
- Type (entries: ActivityEntry[]) => void
- –
- Replaces the built-in CSV download; receives the entries currently shown.
- className
- Type string
- –
- Classes for the root.
