Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Skeleton examples · List

List with Icons Skeleton for React

Five bordered list rows with a leading icon, two lines of text and a trailing action.

Framework
UI library

A loading list of bordered rows: a square for the icon, two lines of text, and a second square at the end for an action. Every block is a Skeleton.

Use it for settings lists, file lists or any row with an icon in front and an action behind.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

FAQ

How many rows does this list show?

Five. ROWS maps them into a max-w-md column with gap-3. Each row is flex items-center gap-3 rounded-md border p-3.

What are the squares at each end?

Both are size-8 shrink-0 rounded-md. One leads the row, one trails it. shrink-0 keeps them square while the text is flex-1.

What text does a row reserve?

Two lines in a gap-2 column: h-4 w-2/3 and h-3 w-1/2. The second bar is a smaller height and a shorter width.

Where does the row border come from?

rounded-md border p-3 is on the row div. The bars inside use Skeleton's own rounded-md and bg-muted.

How do I match a real icon row?

Keep the leading and trailing blocks at size-8, the text column flex-1, and items-center so the squares line up with the two lines.

Should these rows be announced?

Set aria-hidden on each Skeleton when a status already says the list is loading. The pulse should not be the only message.

All 30 skeleton examples