Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

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.

An image runs to the card edges, then a title and three lines, then a price and a button on one row. The image bar drops its rounding so the card can clip it.

Use it for a store card whose picture is the top of the card. A known upload is clearer as Progress. In React, Base UI does not price the product.

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

Anatomy

Skeleton anatomy: avatar, title, description, media

Usage

<div className="flex w-full max-w-sm flex-col gap-3 overflow-hidden rounded-md border">
  <Skeleton className="h-40 w-full rounded-none" />
  <div className="flex flex-col gap-3 p-4">
    <Skeleton className="h-5 w-2/3" />
    <Skeleton className="h-4 w-full" />
    <Skeleton className="h-4 w-5/6" />
    <Skeleton className="h-4 w-4/6" />
    <div className="mt-2 flex items-center justify-between">
      <Skeleton className="h-6 w-20" />
      <Skeleton className="h-9 w-24" />
    </div>
  </div>
</div>

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.

API Reference

Skeleton

No extra props in this demo. The rest is on the Skeleton page.

All 30 skeleton examples