Docs › Components › Skeleton

Shadcn Skeleton

The shadcn/ui Skeleton is an animated placeholder that stands in for content while it loads, styled with Tailwind CSS v4. Sizing several skeletons to match the real layout reduces layout shift and perceived wait. Skeletons cover loading states for cards, tables, and lists across ShadcnStore blocks.

Key features

• Animated placeholder in any size or shape.
• Compose several to mirror the real content layout.
• Reduces layout shift by reserving space.
• A single styled div with a pulse animation, no dependency.

Installation

npx shadcn@latest add skeleton

Usage

import { Skeleton } from "@/components/ui/skeleton"

export function Example() {
  return (
    <div className="flex items-center gap-3">
      <Skeleton className="size-11 rounded-full" />
      <div className="space-y-2">
        <Skeleton className="h-3 w-48" />
        <Skeleton className="h-3 w-36" />
      </div>
    </div>
  )
}

Size each skeleton with width and height utilities so the placeholder matches the loaded content.

Card skeleton

Compose several skeletons to mirror the shape of the content that will load: a media block above two text lines.

<div className="space-y-3">
  <Skeleton className="h-40 w-full rounded-xl" />
  <Skeleton className="h-4 w-2/3" />
  <Skeleton className="h-4 w-1/2" />
</div>

Accessibility

• Mark the loading region with aria-busy="true" or include a visually hidden "Loading" label so screen readers announce the pending state.
• Match skeleton shapes to the final content so the layout does not jump when data arrives.
• Keep the animation subtle; respect reduced-motion preferences where possible.

When to use the Skeleton

Use a Skeleton when content takes a noticeable moment to load and you know its shape: a profile card, a table of rows, or a feed. For very fast loads, or when the shape is unknown, a simple spinner or Progress bar may be better. Do not leave skeletons on screen if a request fails; show an Alert instead.

Used in these blocks

• Datatables: loading rows.
• Apps: loading dashboards.
• Widgets: loading metric cards.

Related components

A Skeleton mirrors the shape of a Card, Data Table, or Avatar. For determinate loading use a Progress bar; for load failures use an Alert.

FAQ

What is the shadcn skeleton used for?

The Skeleton shows an animated placeholder in the shape of content while data loads, reducing layout shift and perceived wait.

How do I build a skeleton for a card or list?

Compose several Skeleton blocks sized and positioned to match the real content, such as an avatar circle plus two text lines.

Is the skeleton accessible?

Mark the loading region with aria-busy or a visually hidden "Loading" label so screen readers know content is pending.

When should I use a spinner instead?

Use a spinner or Progress bar when the content shape is unknown or the wait is short; use a skeleton when you can mirror the final layout.