List / ListItem
Markdown for agentsSemantic list (ul/li) for rows of related items: settings, results, nav — with leading/trailing slots, selection, and pressable rows.
npx slipstream-ui@latest add listPressable rows (interactive)
Active thread: Release notes draft
Slots and descriptions
- NEWDeploy pipelinePushes main to production on mergeAdmin
- APIWebhooks3 endpoints registered
- Disabled row
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| divided | boolean | false | Hairline dividers between rows (List). |
| bordered | boolean | false | Card-like surface and border around the list (List). |
| size | 'default' | 'compact' | 'default' | Row density (List). |
| leading | ReactNode | — | Leading slot: icon, avatar, status dot, or checkbox (ListItem). |
| trailing | ReactNode | — | Trailing slot: chevron, badge, meta, or action (ListItem). |
| selected | boolean | false | Marks the row as the active/selected item (ListItem). |
| description | string | — | Secondary line under the main content (ListItem). |
| onClick | () => void | — | Makes the row pressable — content renders inside a full-width button (ListItem). |
Accessibility
- Renders a real <ul>/<li> — screen readers announce item counts and per-item navigation.
- Pressable rows wrap content in a <button>, so ul > li semantics stay valid while the row is keyboard-operable.
- For navigation lists, pass aria-current="true" on the active row via props.
Browser support
| Browser | Tested versions |
|---|---|
| Chrome | 111+ (Mar 2023) |
| Edge | 111+ (Mar 2023) |
| Firefox | 121+ (Dec 2023) |
| Safari | 17.2+ — macOS & iOS (Dec 2023) |
Slipstream components rely only on CSS custom properties, Flexbox/Grid, and ARIA — the everyday baseline of the last two years of evergreen releases. Anything newer is progressive enhancement: unsupported browsers keep full functionality with static behavior instead of animations.