Shadcn Skeleton Components

Shadcn Skeleton Component

The Shadcn Skeleton is a React loading placeholder: a gray, gently pulsing shape that stands in for content while it loads. Instead of an empty page or a single spinner, users see the outline of what is coming: an avatar, a few lines of text, a card or a table. The page feels faster, and the layout does not jump when the real content arrives.

The layouts here mirror real screens: an avatar with two text lines, a card with a 16:9 image, a user list, stacked paragraphs and a table that loads remotely. The shadcn skeleton itself is a plain element with no JavaScript, styled with shadcn/ui, React and Tailwind CSS, so it fits any interface built on Radix UI or Base UI and follows your theme colors in dark mode.

What is the Shadcn Skeleton Component?

The shadcn/ui Skeleton is a single div with three classes: a muted background, rounded corners and Tailwind's animate-pulse animation. It has no fixed size, so you give each skeleton a width and a height with utility classes and combine several of them to mirror the layout of the real content. A circle becomes an avatar, a few thin bars become a paragraph, and a wide block becomes an image.

Use a skeleton when you know the shape of the content that is loading, such as a list, a card or a profile. When the wait has no predictable shape, like submitting a form or processing a file, a Spinner is clearer. When you can measure how far along a task is, show a Progress bar instead, and when a request returns no data at all, replace the skeleton with an Empty state.

Anatomy of the Shadcn Skeleton

7 Shadcn Skeleton Variants

Each skeleton variant listed here is previewed live at the top of this page, together with its source code and install command.

• Avatar with text: A round avatar placeholder next to two text lines, the classic loading state for a profile or comment.
• Card: The same avatar and text layout placed inside a Card, ready for dashboards and feeds.
• Card with image: A card with a 16:9 image placeholder on top and an author row below, for blog and product grids.
• List: Rows with an avatar, a text bar of varying width and a short value on the right, like a list of users or transactions.
• Avatar grid: A title bar above two rows of round placeholders, for team members or app icons.
• Paragraphs: Stacked pairs of text lines with different lengths that imitate real paragraphs.
• Table: A table whose header cells and rows are filled with skeleton bars, for data tables that load remotely.

How to Install the Shadcn Skeleton Component

Set up shadcn/ui in your project if you have not already, then add the Shadcn UI Kit registry to your components.json once:

{
  "registries": {
    "@shadcnuikit": "https://shadcnuikit.com/r/{name}.json"
  }
}

Then install a skeleton variant by its name:

npx shadcn@latest add @shadcnuikit/skeleton1

The same command works with pnpm dlx, yarn dlx and bunx --bun. Each variant has a copy button for every package manager, and the code is added to your project as plain React and Tailwind CSS that you can edit freely.

How to Use the Shadcn Skeleton Component

Import Skeleton and size each one with Tailwind classes. Match the dimensions of the real content so nothing shifts when it loads.

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

export function ProfileSkeleton() {
  return (
    <div className="flex items-center gap-4" aria-busy="true">
      <Skeleton className="size-12 rounded-full" />
      <div className="space-y-2">
        <Skeleton className="h-4 w-48" />
        <Skeleton className="h-4 w-32" />
      </div>
      <span className="sr-only">Loading profile...</span>
    </div>
  )
}

Why Use the Shadcn Skeleton Component

• Feels faster: Users see structure immediately, which makes the wait feel shorter than a blank screen or a spinner.
• No layout shift: Placeholders reserve the space of the real content, so the page does not jump when data arrives.
• Zero JavaScript: It is a styled div, so it works in server components and loading files without a client bundle.
• Any shape: Circles, lines, blocks and tables are all the same component with different classes.
• Theme aware: The color is bg-muted from your theme, so skeletons look right in light and dark mode.

Common Skeleton Use Cases

• Dashboards: Stat cards, charts and tables that load data from an API after the page renders.
• Feeds and comments: Posts and replies with an avatar, a name and a few lines of text.
• Product and blog grids: Cards with image placeholders while products or articles are fetched.
• Data tables: Rows of placeholder cells while a page of results loads or a filter changes.
• Profile pages: Avatar, name, bio and stats placeholders on user and account pages.
• Route transitions: Full page skeletons in a Next.js loading.tsx file while a server component streams in.

Customizing the Shadcn Skeleton

Everything about a skeleton is a class. Use rounded-full for avatars, aspect-video for images, and fractional widths such as w-2/3 so text lines look natural. To change the color, override bg-muted with another theme color, and to stop the animation for users who prefer less motion, add motion-reduce:animate-none. Colors come from your theme, which you can create with the free Theme Generator.

A Next.js App Router loading file that shows a list skeleton while the page loads:

// app/users/loading.tsx
import { Skeleton } from "@/components/ui/skeleton"

export default function Loading() {
  return (
    <div className="space-y-4">
      {Array.from({ length: 5 }).map((_, i) => (
        <div key={i} className="flex items-center gap-4">
          <Skeleton className="size-10 rounded-full" />
          <Skeleton className="h-4 w-2/3" />
        </div>
      ))}
    </div>
  )
}

Skeleton Accessibility

Skeletons are purely visual, so screen readers get nothing from the gray shapes themselves. Mark the loading region with aria-busy="true" and add a short sr-only text such as "Loading..." so assistive technology users know content is on its way. When the data arrives, remove the skeleton and the busy state together.

The pulse animation is subtle, but some users are sensitive to motion. Respect the reduced motion setting with motion-reduce:animate-none. Skeletons are not focusable and have no keyboard interaction.

Skeleton Best Practices

• Match the size and position of the real content as closely as you can to avoid layout shift.
• Keep skeletons simple; outline the main blocks instead of drawing every small detail.
• Vary the width of text lines so the placeholder reads as text rather than a grid of bars.
• Show skeletons only for waits longer than a moment; for very fast responses they cause flicker.
• Replace the skeleton with an empty state or an error message if the request returns nothing or fails.
• Wrap slow server components in Suspense with a skeleton as the fallback to stream the rest of the page first.

Components Related to Skeleton

Shadcn Skeleton FAQ

Looking for something else? Browse all shadcn/ui components or ready-made UI blocks built with them.