A chronological stream of who did what. The kit ships one component, FeedItem — avatar, header, optional supporting block, connector; the feed list is yours.
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.
Specimen
Guidelines
Code
Demo
Change the props and copy the result. Size, connector, and unseen are real props; the snippet emits the whole object.
“Lorem ipsum dolor sit amet, consectetur adipiscing elit. Tincidunt nunc ipsum tempor purus vitae id.”
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 />
The row takes an object, not children
Everything in a row comes from a FeedItemType fixture spread onto the component. There is no children slot, so the copied snippet carries the object with it.
Contextual demo
The kit ships the row, never the list. The feed loop and its connector rule need a whole screen, so they have one.
connector on and off are real props. The horizontal rule is application markup, because the sheet’s container carries a Divider axis the kit has no counterpart for.
The family
One component. The feed itself is yours to assemble; see Contextual demo above.
The components in this family, with their descriptions and import paths
One feed row: an avatar with optional status, a header of name, time, and action, an optional supporting block, and the connector down to the next row.
“Lorem ipsum dolor sit amet, consectetur adipiscing elit. Tincidunt nunc ipsum tempor purus vitae id.”
Text, connector off
Size moves the avatar and nothing else
Measured in the browser: 32px at sm and 40px at md, with identical row heights, text sizes, gaps, and padding. The sheet does the same, with its sm and md symbols the same height to the pixel, so this is the kit tracking the design rather than a size system that stops halfway.
States
The row has no states. What responds are the links inside it, the avatar’s status dot, and the unseen marker.
