List
Stacked rows for settings, activity feeds, inboxes, or file listings. Minimal by default — compose leading icons, trailing badges, or descriptions with plain flex markup.
Anatomy
<List divided bordered size="md" ordered>
<ListItem>Static row</ListItem>
<ListItem onClick={...}>Clickable row</ListItem>
<ListItem href="...">Link row</ListItem>
<ListItem selected>Selected row</ListItem>
</List>Examples
Basic
- Apples
- Oranges
- Pears
Divided
- Apples
- Oranges
- Pears
Bordered
- Apples
- Oranges
- Pears
Ordered
- First step
- Second step
- Third step
Sizes
Small
- Compact row
- Compact row
- Compact row
Medium
- Comfortable row
- Comfortable row
- Comfortable row
Interactive (onClick)
As links (href)
Composed content
No named slots. Drop any JSX inside the item and compose with flex.
Settings rows
List props
divided= false
boolean
Draws horizontal dividers between items.
bordered= false
boolean
Wraps the list in a rounded border + card surface.
ordered= false
boolean
Renders as `<ol>` instead of `<ul>`.
size= 'md'
'sm' | 'md'
Row padding density.
children*
ReactNode
One or more `ListItem` elements.
| Prop | Type | Default | Description |
|---|---|---|---|
| divided | boolean | false | Draws horizontal dividers between items. |
| bordered | boolean | false | Wraps the list in a rounded border + card surface. |
| ordered | boolean | false | Renders as `<ol>` instead of `<ul>`. |
| size | 'sm' | 'md' | 'md' | Row padding density. |
| children* | ReactNode | — | One or more `ListItem` elements. |
ListItem props
onClick
() => void
Makes the item a button. Adds hover + focus ring.
href
string
Makes the item an anchor. Takes precedence over onClick.
selected= false
boolean
Applies `bg-accent-subtle` to indicate selection.
children*
ReactNode
Row content. Compose with flex inline — no named slots.
| Prop | Type | Default | Description |
|---|---|---|---|
| onClick | () => void | — | Makes the item a button. Adds hover + focus ring. |
| href | string | — | Makes the item an anchor. Takes precedence over onClick. |
| selected | boolean | false | Applies `bg-accent-subtle` to indicate selection. |
| children* | ReactNode | — | Row content. Compose with flex inline — no named slots. |