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 React ->

Installation

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

Examples

Loading interactive previews…

Files installed (1)

  • app/components/blocks/ActivityFeed.vue 2.8 kB 
    <script setup lang="ts">
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')
</script>

<template>
  <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 class="text-sm">
            <span class="font-medium">Maya Chen</span>
            <span class="text-muted-foreground"> approved the leave request</span>
          </p>
          <RelativeTime date="2026-08-14T11:18:00.000Z" :now="now" locale="en" class="mt-0.5 block" />
        </TimelineContent>
      </TimelineItem>

      <TimelineItem status="info">
        <TimelineMedia variant="avatar">
          <Avatar size="sm">
            <AvatarFallback>OF</AvatarFallback>
          </Avatar>
        </TimelineMedia>
        <TimelineContent>
          <p class="text-sm">
            <span class="font-medium">Omar Farid</span>
            <span class="text-muted-foreground"> added a comment</span>
          </p>
          <p class="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" class="mt-0.5 block" />
        </TimelineContent>
      </TimelineItem>

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

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

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