Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Skeleton examples · Card

Simple Card with Image and Text Skeleton for React

A card placeholder with a wide image block above two lines of text.

Framework
UI library

The smallest card placeholder: a tall image block and two lines of text under it, the second one shorter. Three Skeleton elements in a column, with no border around them.

Use it for post previews, product tiles or media grids while their images and titles 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

What wraps the image and the lines?

flex w-full max-w-sm flex-col gap-3. There is no border on the wrapper. The image and the two lines stack with gap-3.

How big is the image bar?

h-48 w-full. It uses the default radius and bg-muted from Skeleton. Match h-48 to the image you render.

Why are the two text lines different widths?

h-4 w-3/4 then h-4 w-1/2. The second bar is shorter, so the pair reads as a title and a short line under it.

Where does the pulse come from?

animate-pulse on Skeleton, with data-slot="skeleton". Edit the skeleton file under components/ui to change the pulse or the bg-muted fill for every bar.

How do I keep this card from jumping?

Keep the image at h-48 w-full and the lines at h-4 if that is what the loaded card uses. Change the widths when the real title is longer or shorter than w-3/4.

Should this card skeleton be hidden?

Set aria-hidden on the three bars when nearby text already says the card is loading. Do not use them as the only loading message.

All 30 skeleton examples