Components · Controls
List rowListRow
A row without its own card: thumbnail, title, meta
npx shadcn@latest add @umbra/list-rowA row with no card of its own: a row has no background until it is hovered or selected. Then it gets the --nested tone with the nested radius. List lays rows out in one column, and in two from 1100 px
Spacing follows “inner is less than outer” (DESIGN.md, rule 13): thumbnail to text 8, row edge 12. Before aid-design PR 8 it was 16 and 8: content items sat farther from each other than from the edge. The row got 8 px taller (72 instead of 64)
When to use
- A list of meetings, records, cases
- A link row:
asChildwith<Link>inside
When not to use
- A single block of meaning:
Tile - A card in a card: list rows are not wrapped in
Tile variant="nested" - Choice options:
Select
Meetings
7 recordings this week
New recordingProcessing the recording
Team standupTue, 10:00 · 32 min
Designer interviewMon, 16:30 · 48 min
Call with contractorFri, 12:00 · 21 min
Mockup reviewThu, 11:00 · 54 min
Sprint retroWed, 17:00 · 40 min
Meeting with lawyerWed, 12:30 · 25 min
Metrics reviewTue, 15:00 · 36 min
Do
- Keep meta short: date, duration, status
- Show the record’s real status in the thumbnail (icon, Spinner, Skeleton)
Don’t
- Divider lines between rows: use space instead of lines
- Two-line titles: the title is truncated with an ellipsis