Pesto UI

Activity Feed

A vertical timeline of events — a tinted marker or avatar per item, joined by a connector that stops at the last row.

tsx
import { ActivityFeed, ActivityFeedItem } from "@pestoui/core"

Run timeline

The connector is drawn by each item and hidden on the last one, so a feed of any length ends cleanly.

  1. Deployment finished
    2m ago
    Niche Content Composer v4 is live in production.
  2. 12 documents indexed
    18m ago
    Knowledge base rebuilt from the shared folder.
  3. Rate limit reached
    1h ago
    The chat connector paused for 5 minutes.
  4. Draft branch created
    Yesterday

Marker tones

The tone tints the marker only — the title and description beside it always stay neutral.

  1. default — routine edits
  2. info — a new draft is ready
  3. success — the run completed
  4. warning — quota is running low
  5. destructive — the agent stopped

Avatars instead of markers

Pass avatar for people-driven feeds. It replaces the marker entirely, so icon and tone are ignored.

  1. Account owner invited two teammates
    10:24
    Both are pending acceptance.
  2. Team admin renamed the workspace
    09:02
  3. Seat added to the Growth plan
    Mon

Props

PropTypeDefaultDescription
titleReact.ReactNode—ActivityFeedItem — the headline. Required; accepts nodes so names can be emphasised.
descriptionReact.ReactNode—ActivityFeedItem — muted secondary line under the title.
timestampstring—ActivityFeedItem — tabular-nums stamp pinned to the right of the title row.
iconReact.ReactNode—ActivityFeedItem — glyph inside the squircle marker.
avatarReact.ReactNode—ActivityFeedItem — renders in place of the marker; icon and tone are then unused.
tone"default" | "info" | "success" | "warning" | "destructive""default"ActivityFeedItem — tints the marker background and glyph only.
PreviousAccount MenuNext Activity Gauge

Pesto UI · 117 documented components