Activity Feed

Component

About

A chronological activity log that lists actor-driven events — who invited whom, who created what — each row pairing an avatar with a description and a relative timestamp, for audit logs and "who did what" feeds.

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

Code

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

Usage.tsx

import {
  ActivityFeed,
  ActivityItem,
  ActivityAvatar,
  ActivityContent,
  ActivityText,
  ActivityTime,
} from "@/components/ui/activity-feed";
import { Avatar } from "@/components/ui/activity-feed-utils/avatar";

export default function ActivityFeedDemo() {
  return (
    <div className="w-full max-w-md p-6">
      <ActivityFeed>
        <ActivityItem>
          <ActivityAvatar>
            <Avatar name="Ada Lovelace" size="sm" />
          </ActivityAvatar>
          <ActivityContent>
            <ActivityText>
              <strong>Ada Lovelace</strong> invited{" "}
              <strong>Grace Hopper</strong> to the workspace
            </ActivityText>
            <ActivityTime>2 hours ago</ActivityTime>
          </ActivityContent>
        </ActivityItem>
        <ActivityItem>
          <ActivityAvatar>
            <Avatar name="Alan Turing" size="sm" />
          </ActivityAvatar>
          <ActivityContent>
            <ActivityText>
              <strong>Alan Turing</strong> created project{" "}
              <strong>Enigma</strong>
            </ActivityText>
            <ActivityTime>5 hours ago</ActivityTime>
          </ActivityContent>
        </ActivityItem>
      </ActivityFeed>
    </div>
  );
}