Activity Feed

Activity

Latest workspace changes.

Production release shipped
Release
Version 3.12.0 is live for all enterprise workspaces.
MDMatos Deploy4 min ago18 checks
Checkout flow review requested
Review
The billing team opened a final review for plan upgrades.
ALAna Lima22 min ago9 checks
Customer health summary generated
AI
New expansion risks were added to the QBR workspace brief.
AIWorkspace AI46 min ago6 checks
Usage threshold notification sent
Usage
Acme Labs crossed 80% of their monthly automation quota.
RORevenue Ops1 h ago4 checks
Security audit passed
Audit
SSO enforcement and approvals are compliant.
SCSecurity3 h ago12 checks

"use client";

import {
  Bell,
  CheckCircle2,
  GitPullRequestArrow,
  Sparkles,
  Zap,
} from "lucide-react";
import {
  ActivityFeed,
  type ActivityFeedItem,
} from "@/components/matos-ui/activity-feed";

const activityItems: ActivityFeedItem[] = [
  {
    id: "release",
    title: "Production release shipped",
    description: "Version 3.12.0 is live for all enterprise workspaces.",
    time: "4 min ago",
    badge: "Release",
    actor: { name: "Matos Deploy", initials: "MD" },
    icon: <Zap />,
    tone: "success",
    unread: true,
    checks: "18 checks",
  },
  {
    id: "review",
    title: "Checkout flow review requested",
    description: "The billing team opened a final review for plan upgrades.",
    time: "22 min ago",
    badge: "Review",
    actor: { name: "Ana Lima", initials: "AL" },
    icon: <GitPullRequestArrow />,
    tone: "info",
    checks: "9 checks",
  },
  {
    id: "summary",
    title: "Customer health summary generated",
    description: "New expansion risks were added to the QBR workspace brief.",
    time: "46 min ago",
    badge: "AI",
    actor: { name: "Workspace AI", initials: "AI" },
    icon: <Sparkles />,
    tone: "violet",
    unread: true,
    checks: "6 checks",
  },
  {
    id: "alert",
    title: "Usage threshold notification sent",
    description: "Acme Labs crossed 80% of their monthly automation quota.",
    time: "1 h ago",
    badge: "Usage",
    actor: { name: "Revenue Ops", initials: "RO" },
    icon: <Bell />,
    tone: "warning",
    checks: "4 checks",
  },
  {
    id: "audit",
    title: "Security audit passed",
    description: "SSO enforcement and approvals are compliant.",
    time: "3 h ago",
    badge: "Audit",
    actor: { name: "Security", initials: "SC" },
    icon: <CheckCircle2 />,
    tone: "success",
    checks: "12 checks",
  },
];

export function ActivityFeedDemo() {
  return (
    <div className="flex w-full justify-center">
      <ActivityFeed
        className="max-w-[420px]"
        compact
        title="Activity"
        description="Latest workspace changes."
        items={activityItems}
      />
    </div>
  );
}

Installation

pnpm dlx shadcn@latest add https://matos-ui.com/r/activity-feed.json

Usage

import { ActivityFeed } from "@/components/matos-ui/activity-feed"

<ActivityFeed
  title="Activity"
  description="Recent product events and operational changes."
  items={[
    {
      id: "deploy",
      title: "Production deploy completed",
      description: "Release v2.8.0 is now serving all workspaces.",
      time: "2 min ago",
      badge: "Deploy",
      tone: "success",
      unread: true,
    },
  ]}
/>

Reference

ActivityFeed Props

Prop	Type	Default	Description
`items`	`ActivityFeedItem[]`	-	Feed items to render.
`title`	`ReactNode?`	-	Optional header title.
`description`	`ReactNode?`	-	Optional header description.
`action`	`ReactNode?`	-	Optional header action.
`showAction`	`boolean`	`false`	Shows the built-in View all action.
`emptyText`	`ReactNode?`	`"No activity yet"`	Empty state content.
`compact`	`boolean`	`false`	Reduces row padding.
`size`	`"sm" \| "md" \| "lg"`	-	Optional max width preset.

ActivityFeedItem

Field	Type	Description
`id`	`string`	Unique item id.
`title`	`ReactNode`	Main row title.
`description`	`ReactNode`	Optional supporting text.
`time`	`ReactNode`	Optional timestamp.
`badge`	`ReactNode`	Optional status badge.
`checks`	`ReactNode`	Optional checks metadata.
`meta`	`ReactNode`	Optional secondary metadata.
`actor`	`object`	Optional actor with `name` and `initials`.
`icon`	`ReactNode`	Optional marker icon.
`tone`	`ActivityFeedTone`	`neutral`, `info`, `success`, `warning`, or `violet`.
`unread`	`boolean`	Adds a subtle pulse and active row signal.

Also exported: ActivityFeedEmpty, activityFeedVariants, and related types.