Brand logoentauri

Add this component

npx zentauri-ui add activity-feed

Accessibility notes

Keyboard accessible by default with semantic markup, visible focus treatment, and tokenized states. Add descriptive labels for icon-only or decorative usage.

Dependency notes

Check Installation for shared peers. This component keeps styling in Tailwind classes and the --zui-* token contract.

Data display

Grouped activity feeds

ActivityFeed accepts structured actor, verb, and object events, then groups adjacent matching actions without requiring consumers to compose timeline items manually.

  • Maya Chen commented on Project Atlas

    2 events2m ago

  • Leo Park created Issue #12

    1h ago

  • Dana Ortiz moved Roadmap

    3h ago

Activity feed playground

Feed events are structured as actor, verb, and object data. Consecutive matching events collapse into a compact group by default; switch grouping off to inspect every event individually.

  • Maya Chen commented on Project Atlas

    2 events2m ago

  • Leo Park created Issue #12

    1h ago

  • Dana Ortiz moved Roadmap

    3h ago

All appearances

Every shipped Activity Feed appearance at a glance. Select a card to load it into the playground above.

default

  • Maya Chen commented on Project Atlas

    2 events2m ago

  • Leo Park created Issue #12

    1h ago

  • Dana Ortiz moved Roadmap

    3h ago
blue

  • Maya Chen commented on Project Atlas

    2 events2m ago

  • Leo Park created Issue #12

    1h ago

  • Dana Ortiz moved Roadmap

    3h ago
cyan

  • Maya Chen commented on Project Atlas

    2 events2m ago

  • Leo Park created Issue #12

    1h ago

  • Dana Ortiz moved Roadmap

    3h ago
teal

  • Maya Chen commented on Project Atlas

    2 events2m ago

  • Leo Park created Issue #12

    1h ago

  • Dana Ortiz moved Roadmap

    3h ago
emerald

  • Maya Chen commented on Project Atlas

    2 events2m ago

  • Leo Park created Issue #12

    1h ago

  • Dana Ortiz moved Roadmap

    3h ago
lime

  • Maya Chen commented on Project Atlas

    2 events2m ago

  • Leo Park created Issue #12

    1h ago

  • Dana Ortiz moved Roadmap

    3h ago
violet

  • Maya Chen commented on Project Atlas

    2 events2m ago

  • Leo Park created Issue #12

    1h ago

  • Dana Ortiz moved Roadmap

    3h ago
purple

  • Maya Chen commented on Project Atlas

    2 events2m ago

  • Leo Park created Issue #12

    1h ago

  • Dana Ortiz moved Roadmap

    3h ago
pink

  • Maya Chen commented on Project Atlas

    2 events2m ago

  • Leo Park created Issue #12

    1h ago

  • Dana Ortiz moved Roadmap

    3h ago
rose

  • Maya Chen commented on Project Atlas

    2 events2m ago

  • Leo Park created Issue #12

    1h ago

  • Dana Ortiz moved Roadmap

    3h ago
orange

  • Maya Chen commented on Project Atlas

    2 events2m ago

  • Leo Park created Issue #12

    1h ago

  • Dana Ortiz moved Roadmap

    3h ago
amber

  • Maya Chen commented on Project Atlas

    2 events2m ago

  • Leo Park created Issue #12

    1h ago

  • Dana Ortiz moved Roadmap

    3h ago
subtle

  • Maya Chen commented on Project Atlas

    2 events2m ago

  • Leo Park created Issue #12

    1h ago

  • Dana Ortiz moved Roadmap

    3h ago
contrast

  • Maya Chen commented on Project Atlas

    2 events2m ago

  • Leo Park created Issue #12

    1h ago

  • Dana Ortiz moved Roadmap

    3h ago
glass

  • Maya Chen commented on Project Atlas

    2 events2m ago

  • Leo Park created Issue #12

    1h ago

  • Dana Ortiz moved Roadmap

    3h ago

Activity Feed API

Generated from the package prop types and variant definitions.

ActivityFeed

ActivityFeedProps

Variants

PropTypeDefault
appearance
amberbluecontrastcyandefaultemeraldglasslimeorangepinkpurplerose+3
default
size
lgmdsm
md

Behavior

PropTypeDefault
emptyStateContent shown when there are no events.ReactNodenone
events*Events to display, ordered from most to least recent.readonly ActivityFeedEvent[]none
groupingCollapse adjacent events with the same actor, verb, and object.ActivityFeedGrouping | undefinednone
Inherited HTML props
PropTypeDefault
classNamestring | undefinednone
idstring | undefinednone
onClickMouseEventHandler<HTMLDivElement> | undefinednone
styleCSSProperties | undefinednone
titlestring | undefinednone

ActivityFeedVariant

ActivityFeedVariantProps

Behavior

PropTypeDefault
appearance'default' | 'blue' | 'cyan' | 'lime' | 'rose' | 'purple' | 'pink' | 'orange' | 'teal' | 'emerald' | 'violet' | 'amber' | 'subtle' | 'contrast' | 'glass' | null | undefinednone
size'md' | 'sm' | 'lg' | null | undefinednone
CSS variable overrides

Activity Feed CSS variables

Override these activity feed variables on :root, a theme selector, or a component wrapper.

70 variables

Pattern: --zui-<component>-<slot?>-<variant?>-<property>-<state?>-dark?

:root {
  --zui-activity-feed-border: #0000001a;
  --zui-activity-feed-bg: #ffffff;
  --zui-activity-feed-fg: #0f172a;
  --zui-activity-feed-divider: #0000001a;
  --zui-activity-feed-avatar-bg: #0ea5e9;
  --zui-activity-feed-avatar-fg: #ffffff;
  --zui-activity-feed-muted-fg: #64748b;
  --zui-activity-feed-count-bg: #f1f5f9;
  --zui-activity-feed-count-fg: #475569;
  --zui-activity-feed-subtle-bg: #f8fafc;
  --zui-activity-feed-contrast-bg: #ffffff;
  --zui-activity-feed-glass-bg: #ffffffcc;
  --zui-activity-feed-glass-border: #ffffff66;
  --zui-activity-feed-blue-bg: #eff6ff;
  --zui-activity-feed-blue-border: #bfdbfe;
  --zui-activity-feed-cyan-bg: #ecfeff;
  --zui-activity-feed-cyan-border: #a5f3fc;
  --zui-activity-feed-teal-bg: #f0fdfa;
  --zui-activity-feed-teal-border: #99f6e4;
  --zui-activity-feed-emerald-bg: #ecfdf5;
  --zui-activity-feed-emerald-border: #a7f3d0;
  --zui-activity-feed-lime-bg: #f7fee7;
  --zui-activity-feed-lime-border: #d9f99d;
  --zui-activity-feed-violet-bg: #f5f3ff;
  --zui-activity-feed-violet-border: #ddd6fe;
  --zui-activity-feed-purple-bg: #faf5ff;
  --zui-activity-feed-purple-border: #e9d5ff;
  --zui-activity-feed-pink-bg: #fdf2f8;
  --zui-activity-feed-pink-border: #fbcfe8;
  --zui-activity-feed-rose-bg: #fff1f2;
  --zui-activity-feed-rose-border: #fecdd3;
  --zui-activity-feed-orange-bg: #fff7ed;
  --zui-activity-feed-orange-border: #fed7aa;
  --zui-activity-feed-amber-bg: #fffbeb;
  --zui-activity-feed-amber-border: #fde68a;
}

/* Dark theme variables follow the same names with -dark appended. */
.dark {
  --zui-activity-feed-border-dark: #ffffff1a;
  --zui-activity-feed-bg-dark: #0f172a;
  /* ...same variables with -dark at the end */
}

Overview

Use ActivityFeed for structured activity data. Each event contains an actor, verb, object, and optional timestamp; groups display their event count and latest timestamp.

Common use cases

  • Project and collaboration history.
  • Audit trails for workspace actions.
  • Comment, review, and approval summaries.

FAQ

What events are grouped?

By default, adjacent events are grouped when their actor id, verb, and object id match. The original display order is preserved.

Can I show every event?

Yes. Set grouping to none to render every supplied event as an individual feed row.