ActivityFeed

A vertically stacked, bordered list of ActivityFeedRows, capped at a readable content width. Built for a record's own "Activity" tab: it replaces a hand-rolled scroll list of "who did what, when" events, each optionally expanded with a field-level diff underneath.

No live Attio re-measurement behind its own chrome (the CDP bridge was unreachable when this was built) — its spacing and borders reuse already-measured crisp values rather than a new guess; see activityfeed.recipe.ts for exactly which ones.

Installation

npm install @crisp-ui-kit/crisp

Usage

import {
  ActivityFeed,
  ActivityFeedDiffItem,
  ActivityFeedDiffList,
  ActivityFeedRow,
} from "@crisp-ui-kit/crisp";

<ActivityFeed>
  <ActivityFeedRow actor={<PersonChip name="Ada Lovelace" />} action="updated" when="2h ago">
    <ActivityFeedDiffList>
      <ActivityFeedDiffItem field="Stage" before="Contacted" after="Demo scheduled" />
    </ActivityFeedDiffList>
  </ActivityFeedRow>
  <ActivityFeedRow actor={<PersonChip name="Grace Hopper" />} action="created" when="Yesterday" />
</ActivityFeed>;

Props

ActivityFeedRow

One event row: actor + action + timestamp, with an optional diff list underneath. The last row in an ActivityFeed draws no divider.

ActivityFeedDiffItem

One changed-field line under a row — "Field: before → after", or "Field: set to after" when before is omitted (no known prior value).

Notes

• actor/action are unstyled slots. crisp renders no actor chip or action badge of its own — pass whatever identity treatment your app uses (a PersonChip, an avatar+name) and whatever badge/tag names the action.
• ActivityFeedDiffList is a plain <ul> wrapper with no props beyond children — it exists so ActivityFeedDiffItem's own <li> always lands inside a real list, not so a consumer configures it.