Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Skeleton examples · List

Simple List Items Skeleton for React

Five list rows, each with a small icon block and one line of text.

Framework
UI library

The simplest list placeholder: five rows, each a small square and one line that fills the rest of the row. Every block is a Skeleton.

Use it for menus, link lists or task lists with one line per item.

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 are rendered?

Five. ROWS maps row-1 through row-5 into a max-w-md column with gap-3.

What is in a row?

flex items-center gap-3: a size-4 rounded-sm block and an h-4 flex-1 bar. The bar fills whatever width the icon leaves.

Why is the icon rounded-sm?

rounded-sm replaces the style's default radius on that Skeleton. The text bar keeps the default. Both use bg-muted and animate-pulse.

What keys the rows?

The id from ROWS. The five rows are the same shape, so the key is what tells them apart.

How do I match a real one-line list?

Keep the icon at size-4 and the label at h-4 flex-1 with items-center. The rows stack with gap-3.

Should the list bars be hidden?

Set aria-hidden on each Skeleton when nearby text already says the list is loading. The pulse is decorative.

All 30 skeleton examples