Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Skeleton examples · List

Multi-line List Items Skeleton for React

Three bordered list items with a title, two lines of text and two tag pills.

Framework
UI library

A loading list of taller items: each bordered item has a title, two lines of text and two pill tags under them. Every block is a Skeleton; the tags use rounded-full.

Use it for job posts, article lists or anything with an excerpt and tags.

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

Three. ITEMS maps them into a max-w-md column with gap-4. Each item is flex flex-col gap-2 rounded-md border p-4.

What text does an item reserve?

An h-5 w-3/4 title, then h-4 w-full and h-4 w-5/6. The shorter second line reads as the end of the excerpt.

How are the tags drawn?

mt-2 flex items-center gap-2 holds h-6 w-16 rounded-full and h-6 w-20 rounded-full. rounded-full replaces the style's default radius.

Where does the item border come from?

rounded-md border p-4 is on the item div. The bars inside take bg-muted and animate-pulse from Skeleton.

How do I match a real multi-line item?

Keep the title at h-5, two h-4 lines, and two pills at h-6. Match w-3/4 and w-5/6 to the title and excerpt you render.

Should these items be hidden?

Set aria-hidden on each Skeleton when a status already says the list is loading. Do not leave the pulse as the only loading message.

All 30 skeleton examples