Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Skeleton examples · List

List with Avatars Skeleton for React

Four list rows, each with a round avatar and two lines of text.

Framework
UI library

A loading list of people: each row is a round avatar block, a longer line for the name and a shorter one under it. The avatar doesn't shrink and the text column fills the rest, so the rows keep their shape at any width. Every block is a Skeleton.

Use it for contacts, members or a feed while the people load.

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 in the list?

Four. ROWS maps row-1 through row-4 into a max-w-md column with gap-4.

What is in each row?

flex items-center gap-3: a size-10 shrink-0 rounded-full circle and a flex-1 column with gap-2. The lines are h-4 w-3/4 and h-3 w-1/2.

Which avatar size does size-10 match?

size-10 is the large Avatar, size="lg". shrink-0 keeps that circle from squeezing against the flex-1 text.

What makes the circle round?

rounded-full on the avatar Skeleton. Text bars keep the style's default radius. bg-muted and animate-pulse come from Skeleton itself.

What is the row key?

The string from ROWS, row-1 and so on. The bars are the same on every row.

Should the list skeleton be hidden?

Set aria-hidden on each Skeleton when nearby text already says the list is loading. The circles and lines are decorative.

All 30 skeleton examples