Display
List
A list is the most common thing in an interface and the easiest to over-build. There are no rules between these rows: the leading column lining up and the space each row is given is enough for the eye, and it leaves the page quiet enough that the content is what you notice. The hover fill only appears on rows that actually do something, so hovering tells you truthfully whether there is anything to click.
npx shadcn@latest add @minflow/listWhere to use it
- Inboxes, search results, settings, notifications - any vertical run of records.
- Dense mode when the list is long and being scanned rather than read.
- Reach for Data table instead once rows need to be compared column by column.
Variations
With supporting text
The standard row: a leading glyph, a title, one supporting line, and meta on the right. Two lines is the ceiling - a third turns a list into a table.
Dense
Long lists that get scanned. Titles only, tighter rows, and no supporting line to slow the eye down.
Selectable
When a row is a destination or a choice. The selected row takes a fill rather than a check, because the fill also survives being scrolled past and glanced at.