Surfaces
@rahhal/ui/list

List

View as Markdown

Apple-style inset grouped list. Each `ListGroup` is a rounded card with hairline dividers between rows, optional uppercase header above and helper-text footer below — same model as iOS Settings. Compose `ListItem` rows with `leading` (icon/avatar), `title`, `description`, and `trailing` (value, chevron, switch). Use `variant="plain"` to embed inside another card.

Examples

Grouped list with sections (iOS Settings style)

Account
ProfileMohammed Alhaider
SubscriptionRahhal Pro · monthly
Sign in details, payment methods, and history.
Preferences
Notifications
Dark appearance
Language
English
Privacy & security
Sign out

Plain variant (embed inside another card)

Recent trips
Diplomatic Quarter weekendRiyadh · 3 days
Al Balad food crawlJeddah · 1 day
AlUla heritage trailAlUla · 4 days