Skip to content

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

Free

Simple Card with Image and Text Skeleton for Ark UI

A simple card placeholder with a wide image block above two text lines, the second one shorter.

The smallest card shape: a tall image block and two lines under it, the second one shorter. No border wraps the stack.

Use it for a media grid or product tiles while images and titles load. When you cannot predict that shape, use a Spinner. In React, Ark UI does not hold the image.

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">
  <Skeleton className="h-48 w-full" />
  <Skeleton className="h-4 w-3/4" />
  <Skeleton className="h-4 w-1/2" />
</div>

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.

API Reference

Skeleton

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

All 30 skeleton examples