Activity Feed

Get Ritla UI

What happened on an account: payments, comments, status changes, files and reminders, in a card or a timeline.

Open in Figma

Preview

Mirrored is the same English content laid out right to left: it separates a mirroring bug from a translation one.

Installation

Add the component
$ npx ritla add activity-feed
Also works with shadcn: npx shadcn@latest add @ritla/activity-feed
Dependencies it brings
@phosphor-icons/react
Or copy by hand
Installing by hand copies the component's source into your project. The source comes with a Ritla UI license, so the CLI is the short way to the same files.

Usage

activity-feed.tsx

import { ActivityFeed, ActivityItem } from "@/components/ui/activity-feed";<ActivityFeed heading="Activity">  <ActivityItem leading={<Avatar name="Lina Haddad" />} time="2 min ago">    <strong>Lina Haddad</strong> sent you <strong>JOD 25.000</strong>  </ActivityItem></ActivityFeed>

Examples

Timeline

Items grouped by day on a rail at the start side.

EnglishMirroredArabic

Get the code

LTR →

API reference

ActivityFeed

Prop	Type	Default	Description
`variant`	`"panel" \| "timeline"`	`"panel"`	Figma's Style.
`heading / description`	`ReactNode`	None	The heading and supporting text.
`actions`	`ReactNode`	None	At the end of the header, such as a menu button.
`footer`	`ReactNode`	None	Under the items: a View all activity link.

ActivityItem

Prop	Type	Default	Description
`leading`	`ReactNode`	None	An Avatar for a person, or an `ActivityIcon` for a system event.
`children`	`ReactNode`	None	The sentence; wrap names and amounts in `<strong>`.
`time / dateTime`	`ReactNode / string`	None	The shown time and its machine value.
`detail`	`ReactNode`	None	An `ActivityComment`, an `ActivityFile` or a Button.

ActivityIcon

Prop	Type	Default	Description
`tone`	`"brand" \| "warning" \| "success" \| "danger" \| "neutral"`	`"brand"`	The circle's tone.

ActivityGroup

Prop	Type	Default	Description
`label`	`ReactNode`	None	Today, Earlier this week.

Accessibility

Keyboard

Keys are written for left-to-right. In right-to-left the arrow keys swap: the one pointing toward the reading direction moves forward.

Key	Action
`Tab`	Moves through the links and buttons inside items.

ARIA

The feed is a headed section and its items a list; each time is a <time>.
The download link is named after the file.

Arabic and RTL notes

Mirrors

The avatar or icon starts the row, and the timeline's rail sits on the right.

Does not mirror

File, download and calendar icons don't mirror.

Numerals: Amounts and times as the app passes them.
Arabic typography: The sentence is label-14 with Semibold parts, and the time label-12.
Mixed-direction text: File names are isolated, and comments are dir="auto".