Skip to content

Data display

Activity feed

Time-stamped events, newest first, with relative times.

import { ActivityFeed } from '@jsonresume/ui'Source(opens in a new tab)

Examples

Recent activity
  1. Applied to Senior Engineer at Stripe

  2. Generated a cover letter

    Staff Frontend Engineer, Vercel

  3. Your resume was viewed 14 times

Show code
activity-feed/recent.tsx
import { ActivityFeed } from '@jsonresume/ui';
import { Eye, FileText, Send } from 'lucide-react';

const now = new Date('2026-10-23T12:00:00Z');

export default function ActivityFeedRecent() {
  return (
    <ActivityFeed
      now={now}
      items={[
        {
          id: 1,
          time: '2026-10-23T10:12:00Z',
          title: 'Applied to Senior Engineer at Stripe',
          icon: <Send size={14} />,
        },
        {
          id: 2,
          time: '2026-10-23T08:40:00Z',
          title: 'Generated a cover letter',
          description: 'Staff Frontend Engineer, Vercel',
          icon: <FileText size={14} />,
        },
        {
          id: 3,
          time: '2026-10-21T16:00:00Z',
          title: 'Your resume was viewed 14 times',
          icon: <Eye size={14} />,
        },
      ]}
    />
  );
}

Accessibility

  • Each time is a time element with the exact date in its title.

Props

<ActivityFeed>

Also accepts the attributes of the element ActivityFeed renders.
PropTypeDefaultDescription
items requiredActivityItem[]–
labelstringRecent activity
localestring–
nowDatenew Date()Reference time for "2 hours ago" (defaults to now). Pass it for stable server rendering.