ActivityFeed

Show a timeline of user activity — comments, uploads and status changes — built from ActivityItem rows with optional ActivityContent blocks.

Import


import { ActivityItem, ActivityContent, Avatar } from "@raydenui/ui";

Usage

Basic

Every row needs an avatar and text. text takes nodes, so names and links can be emphasised inline.

Preview

David left a comment on Site redesign

Thurs 21, 2023

10 mins


<ActivityItem
  avatar={<Avatar type="initials" initials="DA" size="sm" />}
  text={
    <>
      <span className="font-medium text-grey-700">David</span> left a comment on{" "}
      <span className="font-medium text-primary-400">Site redesign</span>
    </>
  }
  date="Thurs 21, 2023"
  time="10 mins"
/>

Unread

unread marks a row as not yet seen.

Preview

Moyo assigned you a task

5 mins


<ActivityItem
  avatar={<Avatar type="initials" initials="MO" size="sm" />}
  text={
    <>
      <span className="font-medium text-grey-700">Moyo</span> assigned you a task
    </>
  }
  time="5 mins"
  unread
/>

With a link and badge

link renders a single action in the meta row; badge adds a short label beside it.

Preview


<ActivityItem
  avatar={<Avatar type="initials" initials="AD" size="sm" />}
  text={
    <>
      <span className="font-medium text-grey-700">Ada</span> requested a review
    </>
  }
  time="10 mins"
  link={{ label: "View request", onClick: () => {} }}
  badge="#Marketing-Design"
/>

With a content block

Pass ActivityContent as children to attach a file, image or message block.

Preview

David uploaded a file

2 hours

Project brief.pdf13MB

PDF File11 Sept 23


<ActivityItem
  avatar={<Avatar type="initials" initials="DA" size="sm" />}
  text={
    <>
      <span className="font-medium text-grey-700">David</span> uploaded a file
    </>
  }
  time="2 hours"
>
  <ActivityContent
    variant="file"
    icon="file-alt"
    title="Project brief.pdf"
    size="13MB"
    fileType="PDF File"
    date="11 Sept 23"
  />
</ActivityItem>

Timeline

connector draws the vertical line between rows. Use "top" for the first row, "middle" for the ones between and "last" for the final row.

Preview

Created the project

Just now

Added three collaborators

2 mins

Published the first draft

5 mins


<div className="flex flex-col">
  <ActivityItem
    avatar={<Avatar type="initials" initials="DA" size="sm" />}
    text="Created the project"
    time="Just now"
    connector="top"
  />
  <ActivityItem
    avatar={<Avatar type="initials" initials="MO" size="sm" />}
    text="Added three collaborators"
    time="2 mins"
    connector="middle"
  />
  <ActivityItem
    avatar={<Avatar type="initials" initials="AD" size="sm" />}
    text="Published the first draft"
    time="5 mins"
    connector="last"
  />
</div>

Props

ActivityItem

Prop	Type	Default	Description
`avatar`	`ReactNode`	—	Avatar element (required)
`text`	`ReactNode`	—	Primary text content (required)
`unread`	`boolean`	`false`	Shows the unread dot
`date`	`string`	—	Date label
`time`	`string`	—	Time label, right-aligned
`link`	`{ label: string; href?: string; onClick?: () => void }`	—	Link button in the meta row
`badge`	`string`	—	Badge text in the meta row
`connector`	`"top" \| "middle" \| "last"`	—	Connector line for timeline layouts
`children`	`ReactNode`	—	Content block, e.g. `ActivityContent`

ActivityContent

Prop	Type	Default	Description
`variant`	`ActivityContentVariant`	—	Content variant (required)
`contentStyle`	`ActivityContentStyle`	—	Visual style wrapper
`icon`	`ReactNode \| IconName`	—	Leading icon, file variant
`title`	`string`	—	File name
`size`	`string`	—	File size
`fileType`	`string`	—	File type label
`date`	`string`	—	File date

Accessibility

Put the actor and the action in text so the row reads as a sentence; do not rely on the avatar alone to say who acted.
Give the Avatar an alt describing the person.
Use link rather than making the whole row clickable, so the action is reachable by keyboard and has a name.