Activity feeds

A chronological stream of who did what. The kit ships one component, FeedItem — avatar, header, optional supporting block, connector; the feed list is yours.

Demo

hero
size
Supporting item
import { FeedItem } from "@/components/application/activity-feed/activity-feed"; const item = { "id": "demo", "user": { "name": "Olivia Rhye", "href": "#", "avatarUrl": "https://www.untitledui.com/images/avatars/olivia-rhye?fm=webp&q=80" }, "date": "2 mins ago", "action": { "content": "Commented in", "target": "Marketing site redesign", "href": "#" }, "message": "“Lorem ipsum dolor sit amet, consectetur adipiscing elit. Tincidunt nunc ipsum tempor purus vitae id.”" }; <FeedItem {...item} connector />

In context

in-context
View in a page

Types

cells

The sheet’s Type axis

notification: an action sentence, the target linked
Natali Craig
Natali Craig

@natali

We should ask Oli about this before we go any further.

message: a handle under the name, the words in a bubble

attachment.type

attachment.type jpg
attachment.type txt
attachment.type pdf
attachment.type mp4

Sizes

cells
size sm
size md

Layouts

cells
three notifications, connector on all but the last
three notifications, no connector, spaced
Candice Wu
Candice Wu

@candice

Great to see you again!

three messages, connector on all but the last

Content

matrix

Four supporting items, connector on and off, at size md.

Variants by connector across the columns and supporting down the rows
connector onconnector off
None
File
Labels
Text

Hover and focus states are live. Interact with any cell.

Behaviour

cells

Header

user.username: a second line under the name
no date
action without a target: plain text

Text forms

message: the bubble
comment: the same words, bare

Wrapping

a long action wraps under the name
Olivia Rhye
Olivia Rhye

Commented in Marketing site redesign

“The pricing page is the last thing standing between us and a launch, so let’s get the copy signed off before Friday and ship the rest as it is.”

a long message wraps in the bubble
seven labels, one non-wrapping row
an unbroken file name breaks inside the row

Loading

cells

Line lengths

Loading activity
text short
Loading activity
text medium
Loading activity
text long

A feed

Loading activity
five rows, size sm, lengths cycled
Loading activity
five rows, size md, lengths cycled

States

cells
unseen: the dot at the row’s top end
user.status online
user.status offline
links: hover and focus the name and the target
labels with an href: hover and focus each badge