Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Skeleton examples · Card

Vertical Card Layout Skeleton for React

A vertical card placeholder with an edge-to-edge image, three lines of text, a price and a button.

Framework
UI library

A loading product card: an image block running to the card's edges, a title and three lines of text, then a price and a button on one row. The image Skeleton drops its radius, and the card's border and overflow-hidden clip it.

Use it for store listings, catalogs or recipe cards.

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 is the card clipped?

flex w-full max-w-sm flex-col gap-3 overflow-hidden rounded-md border. overflow-hidden clips the image to the card's corners.

Why does the image use rounded-none?

h-40 w-full rounded-none clears the style's default radius so the bar runs edge to edge. The card's rounded-md and overflow-hidden clip it.

What is in the text block?

flex flex-col gap-3 p-4. The title is h-5 w-2/3. Three h-4 lines follow at w-full, w-5/6 and w-4/6.

How do I match a real product card?

Keep the image at h-40 with rounded-none, the copy inside p-4, and the price and button on one justify-between row. Match h-9 to the button you render.

Should the product bars be hidden?

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

All 30 skeleton examples