Feed
Molecule
Vertical activity streams with icons and timestamps. Used for audit logs, change history, and notification lists.
Playground
Every control sets a real prop of FeedProps. The JSX below updates as you go.
Web
iOS
Android
JSX · FeedProps
Variants
4 examples from src/molecules/feeds/feeds.md, each rendered live from its own JSX.
Anatomy
1
Feed
2
Lead
3
Connector
4
Event
5
Timestamp
Dimmed parts appear only in some states or variants.
Props
11 props on FeedProps, grouped as they are declared in source. Required props are marked *.
Accessibility and keyboard
Keyboard
Not focusable. It has no interaction of its own and takes the semantics of what it wraps.
Semantics
Roles
button
From the docs
The events are a list, as in Tailwind UI, and each event is one of its items: a screen reader announces the list with its number of events and moves through it event by event. A pressable event is a button inside its item. The label prop names the list (for example "Recent activity").
A virtualized feed with a bounded height scrolls its events in a list of its own. On the web, while those events overflow, that list is a keyboard tab stop (before the rows themselves when onItemPress makes them buttons), the keyboard can scroll it, and while it has keyboard focus the feed's card draws the theme's focus ring. Only the events near its viewport are mounted, and each says where it sits in the whole feed, so a screen reader still counts every event. Give a windowed feed a label: focused, a list w
Platform skins
The playground's props on each platform: same tree, native shapes, type and touch sizes.
Usage
The events are a list, as in Tailwind UI, and each event is one of its items: a screen reader announces the list with its number of events and moves through it event by event. A pressable event is a button inside its item. The label prop names the list (for example "Recent activity").
A virtualized feed with a bounded height scrolls its events in a list of its own. On the web, while those events overflow, that list is a keyboard tab stop (before the rows themselves when onItemPress makes them buttons), the keyboard can scroll it, and while it has keyboard focus the feed's card draws the theme's focus ring. Only the events near its viewport are mounted, and each says where it sits in the whole feed, so a screen reader still counts every event. Give a windowed feed a label: focused, a list with no name is named in Chromium from the text of every event it has rendered, so the kit warns in development when it has none.
activity provides the original Argus time gutter, sentence, and dividing rule. trace provides a colored marker, optional halo, optional numeric time gutter, and inline category label. These unframed rows inherit their owning panel. Pass rich content, marker color and halo, and optional kind on each item.
Tokens
Read from the playground render. Values follow the scheme and the ion hue.
--cyan
--fd
--fm
--ft
--ion
--ln2
--ok
--tx
--tx2
--tx3
--warn