Activity Feed

A chronological list of recent activity events.

Preview · Activity Feed

Code

HTML · @primus/ui-core

<div class="vstack" style="max-width:380px">
  <div class="card" style="padding:0.875rem">
    <div style="display:flex;gap:0.75rem;align-items:flex-start">
      <div style="width:32px;height:32px;border-radius:50%;background:color-mix(in srgb,var(--primary) 15%,transparent);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:0.75rem;font-weight:600;color:var(--primary)">AJ</div>
      <div>
        <p style="margin:0;font-size:0.875rem;font-weight:500">Alice Johnson <span style="font-weight:400;color:var(--muted-foreground)">created tenant</span> Acme Corp</p>
        <p style="margin:0;font-size:0.75rem;color:var(--muted-foreground)">2 min ago</p>
      </div>
    </div>
  </div>
  <div class="card" style="padding:0.875rem">
    <div style="display:flex;gap:0.75rem;align-items:flex-start">
      <div style="width:32px;height:32px;border-radius:50%;background:color-mix(in srgb,var(--success) 15%,transparent);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:0.75rem;font-weight:600;color:var(--success)">BS</div>
      <div>
        <p style="margin:0;font-size:0.875rem;font-weight:500">Bob Smith <span style="font-weight:400;color:var(--muted-foreground)">updated plan to</span> Enterprise</p>
        <p style="margin:0;font-size:0.75rem;color:var(--muted-foreground)">15 min ago</p>
      </div>
    </div>
  </div>
</div>

React

import { PrimusActivityFeed } from 'primus-react-ui';

<PrimusActivityFeed items={activityItems} showTimestamps groupByDate={false} />

Angular

<primus-activity-feed [items]="activityItems" [showTimestamps]="true">
</primus-activity-feed>

Props

Prop	Type	Default	Description
items	ActivityItem[]	required	Activity event list
maxItems	number	—	Limit displayed items
showTimestamps	boolean	true	Show relative timestamps
groupByDate	boolean	false	Group items under date headings
loading	boolean	false	Show skeleton loading state

TypeScript interfaces

interface ActivityItem {
  id:        string;
  message:   string;             // Main event text e.g. "Acme Corp upgraded to Enterprise"
  timestamp: string | Date;      // ISO date string or Date object
  actor?: {
    name:    string;             // Person or system that performed the action
    avatar?: string;             // URL to avatar image
    initials?: string;           // Fallback initials e.g. "AJ"
  };
  type?:     'info' | 'success' | 'warning' | 'danger';  // Dot/icon colour
  meta?:     string;             // Optional secondary text
}

// Example
const activityItems: ActivityItem[] = [
  {
    id: '1',
    message: 'Acme Corp upgraded to Enterprise',
    timestamp: '2026-03-03T14:23:00Z',
    actor: { name: 'Alice Johnson', initials: 'AJ' },
    type: 'success',
  },
  {
    id: '2',
    message: 'Initech payment failed',
    timestamp: '2026-03-03T13:05:00Z',
    type: 'danger',
  },
];

Version history

See the Changelog for version history and breaking changes.