# List

Apple-style inset grouped list with section headers/footers. Each `ListGroup` is a rounded card; rows separate with hairline dividers. `variant="plain"` flattens the chrome for embedding inside another card. Mirrors the iOS Settings UX.

[View examples](https://marsam.rahhal.app/components/list) · [Agent index](https://marsam.rahhal.app/llms.txt)

**Import:** `@rahhal/ui/list`

**Category:** `surfaces`

## Anatomy

| part | role |
| --- | --- |
| List | outer container (variant: grouped | plain) |
| ListGroup | one section — renders as a rounded card in `grouped` mode |
| ListGroupHeader | uppercase label above a group |
| ListGroupFooter | muted helper text below a group |
| ListItem | one row: leading + title/description + trailing |

## ListItem props

| prop | type | purpose |
| --- | --- | --- |
| leading | ReactNode | icon or avatar in a 2rem square slot |
| title | ReactNode | primary label, single-line truncated |
| description | ReactNode | secondary label, single-line truncated |
| trailing | ReactNode | value, chevron, switch, or pill |
| destructive | boolean | renders title in destructive color |
| interactive | boolean | adds hover/active states |
| asChild | boolean | render as button/link instead of div |

## When to use what

- **List** — settings, profile screens, any single-column grouped data.
- **Table** — multi-column tabular data (invoices, comparisons, schedules).
- **Card + Section** — featured content with a heading + body that doesn't repeat.