Skip to content
UIGrammer
EN 中文

Component · Content · 23

List

List = repeating rows, each with one primary line, optional meta below, and one trailing action.

Skip to the modify prompt →

Export finisheddataset-march.csv · 2 min ago
Token rotatedAll integrations reconnected
Prompt archivedMoved to the 2025 folder

What is a List?

A list is a column of rows that share a shape. Name the row height, what each line holds, and how rows separate.

Variants

Tap a property to highlight it in the preview.

Name this type explicitly in the prompt.
Name this type explicitly in the prompt.
Name this type explicitly in the prompt.
Name this type explicitly in the prompt.
Give a value, not a vibe word.
Give a value, not a vibe word.
Give a value, not a vibe word.
Give a value, not a vibe word.
Give a value, not a vibe word.
Give a value, not a vibe word.

States

Tap a property to highlight it in the preview.

The resting, valid state of a field before any input or error.
How the control reacts on pointer-over: lift, tint, or border change. Name it so the model does not guess.
The currently chosen value or tab, marked distinctly from the rest.
The state shown when there is no data — give it a message and a next action.

Anatomy

These are the parts to name in your prompt.

  • 01 Row
  • 02 Leading element
  • 03 Primary text
  • 04 Meta text
  • 05 Trailing action

When to use

  • Settings and preference rows
  • Notifications and activity feeds
  • Search results that are denser than cards

Avoid when

  • Each item has an image and a long body — use Card
  • Items need side-by-side comparison — use Table
  • There are fewer than three items

One action per row, revealed on hover — a list with three visible buttons per row has stopped being a list.

See also

Styles
Minimal→Editorial→
Themes
Music Player→AI Chat Product UI→
Components
Table→Card→
Anti-patterns
Emoji as Icons→Gray-on-Gray Text→Hover on Everything→Animating Width and Height→Inter Everywhere→Numbered Marker Abuse→Redundant Typographic Label→
Create a list component. STYLE - rows 48px tall, 12px radius on hover, 8px horizontal padding - primary line 14px #1D1D1F, meta line 12px #6E6E73 below it - one 1px divider between rows, none after the last - the trailing action stays hidden until row hover STATES - default, hover #F5F5F7, selected #EAF2FE with a 2px accent bar, empty TECHNICAL - React - Tailwind CSS - shadcn/ui