Activity Feed
A chronological list of events, with a connecting timeline rail.
- Data
- 1 file
- 1 npm package
- Accessibility notes
Loading the example…
pnpm dlx @dowel-ui/cli add activity-feednpm packages installed: radix-ui.
import { ActivityFeed } from "@/components/ui/activity-feed";Default
With Avatars
With Status
<ActivityFeed>
Plus every attribute of <ol>.
<ActivityItem>
| Prop | Type | Default |
|---|---|---|
lastDraws no connecting line below. Set this on the last item. | boolean | — |
Plus every attribute of <li>.
<ActivityIndicator>
| Prop | Type | Default |
|---|---|---|
asChild | boolean | — |
Plus every attribute of <div>.
<ActivityContent>
Plus every attribute of <div>.
<ActivityTitle>
Plus every attribute of <p>.
<ActivityTime>
| Prop | Type | Default |
|---|---|---|
dateTime (required)Machine-readable timestamp. Required — a relative label alone is ambiguous. | string | — |
Plus every attribute of <time>.
<ActivityDescription>
Plus every attribute of <div>.
An ordered list, so position and count are announced — the order is the meaning here. The rail and the indicators are decorative; the item text has to say what happened. ActivityTime requires a machine-readable dateTime, because a relative label like "2 hours ago" is ambiguous outside the moment it was rendered.
7/7
checks passed
- Tested — passes
- axe assertion — passes
- Keyboard tested — does not apply
- Storybook examples — passes
- Accessibility documented — passes
- Semantic tokens only — passes
- Motion from tokens — does not apply
- className merged — passes
- Visible focus — does not apply
- No fixed widths — passes