Activity Feed

Blocks & Slices

A vertical activity timeline: markers on a mask-faded gradient rail, each with an actor, a highlighted action target, a relative timestamp, and optional detail; rows stagger-fade in on mount and the newest carries a soft live pulse. Under prefers-reduced-motion the feed paints once, fully legible, with no stagger, rail-draw, or pulse.

Inspired by Watermelon UI — activity timeline (pattern) — independently built, not affiliated. Attribution policy

Activity

Ava deployed api-gateway to production
2m ago
v2.4.1 · 312 files changed · 0 regressions
Noah merged #1284 Rate limiter
1h ago
Mia invited 3 teammates to the workspace
5h ago

Installation

npx shadcn@latest add https://parable-three.vercel.app/r/activity-feed.json

Runs the shadcn CLI — the component source is copied intocomponents/parable/activity-feed.tsx. You own it from there.

Usage

The exact code rendering the preview above.

<div className="w-full max-w-sm px-2">
    <ActivityFeed
      title="Activity"
      events={[
        {
          id: "1",
          icon: <Rocket />,
          actor: "Ava",
          action: (
            <>
              deployed{" "}
              <strong className="font-semibold text-white">api-gateway</strong> to
              production
            </>
          ),
          time: "2m ago",
          accent: "#8b5cf6",
          detail: "v2.4.1 · 312 files changed · 0 regressions",
        },
        {
          id: "2",
          icon: <GitPullRequest />,
          actor: "Noah",
          action: (
            <>
              merged{" "}
              <strong className="font-semibold text-white">
                #1284 Rate limiter
              </strong>
            </>
          ),
          time: "1h ago",
          accent: "#ec4899",
        },
        {
          id: "3",
          icon: <UserPlus />,
          actor: "Mia",
          action: (
            <>
              invited{" "}
              <strong className="font-semibold text-white">3 teammates</strong> to
              the workspace
            </>
          ),
          time: "5h ago",
          accent: "#22d3ee",
        },
      ]}
    />
  </div>

Props

ActivityFeedProps extends Omit<React.HTMLAttributes<HTMLElement>, "title">

Prop	Type	Default	Description
events*	ActivityFeedEvent[]	—	Ordered events, newest first — the first row gets the live pulse.
title	React.ReactNode	—	Optional heading rendered above the feed and used as its accessible label.

npm dependencies

motion