Activity feed components

Each item matches the exported FeedItemType: a required id and user object (avatarUrl, name, href, plus optional username and status), with optional date, action, comment, message, attachment, labels and unseen fields. Spread an item onto the component with <FeedItem {...item} />.

Pass connector={true} to FeedItem to render the dotted vertical line beneath its avatar. The connected examples compute it per item as connector={index !== feed.length - 1} so the last entry has no trailing line, while the divided and spaced examples pass connector={false}.

FeedItem accepts a size prop of "sm" or "md", and it defaults to "md". The size drives the avatar, rendering an "sm" avatar for "sm" and an "md" avatar otherwise.

Pass an attachment object with name, size and type, where type is one of "jpg", "txt", "pdf" or "mp4". The matching icon is rendered with FileIcon from @untitledui/file-icons, with separate light and dark variants.

Set unseen to true on the item. This renders a small success-colored dot in the top-right corner of that feed item.

Yes. Pass a labels array of { name, color } objects, where color is any BadgeColors value. Each label renders as a Badge at size="sm" inside an <aside aria-label="Labels"> element.

Each FeedItem renders as an <article>, timestamps use a <time dateTime={date}> element, and labels are grouped in a landmark labelled "Labels". Wrap the items in a <ul> with one <li> per item, as the examples do, so screen readers announce the feed as a list.