UIPackage
Menu

Framework

Vue React

Change language

Boilerplate repo

Activity Feed

block dashboard
Boilerplate repo

Record activity as a Timeline of avatar rows. Each row is spelled out inline — actor, verb, optional comment, relative time. Edit the rows after install; no items wrapper.

Also available for Vue ->

Installation

$ npx shadcn@latest add https://uipkge.dev/r/react/activity-feed.json
Named registry: npx shadcn@latest add @uipkge-react/activity-feed Installs to: components/blocks/

Examples

Loading interactive previews…

Files installed (1)

  • components/blocks/ActivityFeed.tsx 3 kB 
    'use client'

import { Avatar, AvatarFallback } from '@/components/ui/avatar'
import { RelativeTime } from '@/components/ui/relative-time'
import { SectionCard } from '@/components/ui/section-card'
import { Timeline, TimelineContent, TimelineItem, TimelineMedia } from '@/components/ui/timeline'

const now = new Date('2026-08-14T12:00:00.000Z')

export function ActivityFeed() {
  return (
    <SectionCard title="Activity" description="Latest changes on this record.">
      <Timeline>
        <TimelineItem status="success">
          <TimelineMedia variant="avatar">
            <Avatar size="sm">
              <AvatarFallback>MC</AvatarFallback>
            </Avatar>
          </TimelineMedia>
          <TimelineContent>
            <p className="text-sm">
              <span className="font-medium">Maya Chen</span>
              <span className="text-muted-foreground"> approved the leave request</span>
            </p>
            <RelativeTime date="2026-08-14T11:18:00.000Z" now={now} locale="en" className="mt-0.5 block" />
          </TimelineContent>
        </TimelineItem>

        <TimelineItem status="info">
          <TimelineMedia variant="avatar">
            <Avatar size="sm">
              <AvatarFallback>OF</AvatarFallback>
            </Avatar>
          </TimelineMedia>
          <TimelineContent>
            <p className="text-sm">
              <span className="font-medium">Omar Farid</span>
              <span className="text-muted-foreground"> added a comment</span>
            </p>
            <p className="text-muted-foreground mt-1 text-sm">Coverage is confirmed for Thursday and Friday.</p>
            <RelativeTime date="2026-08-14T10:04:00.000Z" now={now} locale="en" className="mt-0.5 block" />
          </TimelineContent>
        </TimelineItem>

        <TimelineItem>
          <TimelineMedia variant="avatar">
            <Avatar size="sm">
              <AvatarFallback>PS</AvatarFallback>
            </Avatar>
          </TimelineMedia>
          <TimelineContent>
            <p className="text-sm">
              <span className="font-medium">Priya Shah</span>
              <span className="text-muted-foreground"> updated the title to “Q3 planning offsite”</span>
            </p>
            <RelativeTime date="2026-08-13T16:40:00.000Z" now={now} locale="en" className="mt-0.5 block" />
          </TimelineContent>
        </TimelineItem>

        <TimelineItem status="muted">
          <TimelineMedia variant="avatar">
            <Avatar size="sm">
              <AvatarFallback>LP</AvatarFallback>
            </Avatar>
          </TimelineMedia>
          <TimelineContent>
            <p className="text-sm">
              <span className="font-medium">Leo Park</span>
              <span className="text-muted-foreground"> opened this request</span>
            </p>
            <RelativeTime date="2026-08-13T09:12:00.000Z" now={now} locale="en" className="mt-0.5 block" />
          </TimelineContent>
        </TimelineItem>
      </Timeline>
    </SectionCard>
  )
}

Raw manifest: https://uipkge.dev/r/react/activity-feed.json