Shadcn Skeleton

You know that awkward moment when your page loads and everything just pops in randomly? Skeletons fix that. They're like placeholders that match your actual content layout, so users see something sensible while stuff loads instead of a blank screen or jumpy layout shifts. This shadcn/ui skeleton brings professional loading states to your React applications.

Skeleton showcase

Clean placeholder for profile data:

import { Skeleton } from "@/components/ui/skeleton"export default function SkeletonDemo() {  return (    <div className="w-full p-6 flex justify-center">      <div className="flex items-center space-x-4">        <Skeleton className="h-12 w-12 rounded-full" />        <div className="space-y-2">          <Skeleton className="h-4 w-[250px]" />          <Skeleton className="h-4 w-[200px]" />        </div>      </div>    </div>  )}

import { cn } from "@/lib/utils"function Skeleton({ className, ...props }: React.ComponentProps<"div">) {  return (    <div      data-slot="skeleton"      className={cn("bg-accent animate-pulse rounded-md", className)}      {...props}    />  )}export { Skeleton }

Just gray boxes that pulse softly, sized and positioned to match your real content. This free open source component keeps users engaged during loading states without making them stare at generic spinners. Styled with Tailwind CSS to match your design system instead of using fixed placeholder dimensions.

npx shadcn@latest add skeleton

Why skeletons actually beat loading spinners

Here's the thing—skeletons feel faster even when they're not. Think about how Facebook and LinkedIn show content placeholders while feeds load, or how YouTube displays video thumbnail skeletons. Users see structure immediately instead of staring at spinning circles that provide zero context about what's loading.

Skeletons eliminate the jarring experience of content suddenly appearing and pushing other elements around. They set clear expectations about what users will see, reduce loading anxiety, and create that polished app experience users expect from professional applications. No more layout shifts or mysterious loading states.

This free shadcn skeleton handles the complex parts—smooth animations, flexible sizing, proper accessibility—while you focus on creating loading states that actually enhance user experience. Whether you're building product catalogs, social feeds, or data dashboards in your Next.js applications, skeletons that match real content keep users engaged in your JavaScript projects.

Common skeleton patterns you'll actually use

Product and article cards

Grid layouts with proper spacing:

import { Skeleton } from "@/components/ui/skeleton"export default function SkeletonCard() {  return (    <div className="w-full p-6">      <div className="grid grid-cols-1 md:grid-cols-2 gap-6 w-full max-w-2xl mx-auto">        {/* Product card skeleton */}        <div className="flex flex-col space-y-3">          <Skeleton className="h-[200px] w-full rounded-xl" />          <div className="space-y-2">            <Skeleton className="h-4 w-3/4" />            <Skeleton className="h-4 w-1/2" />            <div className="flex items-center space-x-2 pt-2">              <Skeleton className="h-6 w-16" />              <Skeleton className="h-6 w-20" />            </div>          </div>        </div>        {/* Article card skeleton */}        <div className="flex flex-col space-y-3">          <Skeleton className="h-[200px] w-full rounded-xl" />          <div className="space-y-2">            <div className="flex items-center space-x-2">              <Skeleton className="h-8 w-8 rounded-full" />              <Skeleton className="h-4 w-24" />            </div>            <Skeleton className="h-5 w-full" />            <Skeleton className="h-4 w-4/5" />            <Skeleton className="h-4 w-3/5" />          </div>        </div>      </div>    </div>  )}

import { cn } from "@/lib/utils"function Skeleton({ className, ...props }: React.ComponentProps<"div">) {  return (    <div      data-slot="skeleton"      className={cn("bg-accent animate-pulse rounded-md", className)}      {...props}    />  )}export { Skeleton }

Dynamic user feeds

Social content and activity streams:

import { Skeleton } from "@/components/ui/skeleton"export default function SkeletonList() {  return (    <div className="w-full p-6 flex justify-center">      <div className="w-full max-w-md space-y-4">        {/* List header */}        <div className="flex items-center justify-between">          <Skeleton className="h-6 w-32" />          <Skeleton className="h-8 w-20 rounded-md" />        </div>        {/* List items */}        {Array.from({ length: 5 }).map((_, i) => (          <div key={i} className="flex items-center space-x-4 p-3 border rounded-lg">            <Skeleton className="h-10 w-10 rounded-full flex-shrink-0" />            <div className="flex-1 space-y-2">              <div className="flex items-center justify-between">                <Skeleton className="h-4 w-24" />                <Skeleton className="h-3 w-12" />              </div>              <Skeleton className="h-3 w-full" />              <Skeleton className="h-3 w-3/4" />            </div>            <div className="flex flex-col space-y-1">              <Skeleton className="h-6 w-6 rounded" />              <Skeleton className="h-6 w-6 rounded" />            </div>          </div>        ))}        {/* Load more button */}        <div className="flex justify-center pt-4">          <Skeleton className="h-9 w-28 rounded-md" />        </div>      </div>    </div>  )}

import { cn } from "@/lib/utils"function Skeleton({ className, ...props }: React.ComponentProps<"div">) {  return (    <div      data-slot="skeleton"      className={cn("bg-accent animate-pulse rounded-md", className)}      {...props}    />  )}export { Skeleton }

Profile and user information

Avatar, name, and details placeholders:

import { Skeleton } from "@/components/ui/skeleton"export default function SkeletonDemo() {  return (    <div className="w-full p-6 flex justify-center">      <div className="flex items-center space-x-4">        <Skeleton className="h-12 w-12 rounded-full" />        <div className="space-y-2">          <Skeleton className="h-4 w-[250px]" />          <Skeleton className="h-4 w-[200px]" />        </div>      </div>    </div>  )}

import { cn } from "@/lib/utils"function Skeleton({ className, ...props }: React.ComponentProps<"div">) {  return (    <div      data-slot="skeleton"      className={cn("bg-accent animate-pulse rounded-md", className)}      {...props}    />  )}export { Skeleton }

Data tables and lists

Structured information with consistent columns:

import { Skeleton } from "@/components/ui/skeleton"export default function SkeletonDemo() {  return (    <div className="w-full p-6 flex justify-center">      <div className="flex items-center space-x-4">        <Skeleton className="h-12 w-12 rounded-full" />        <div className="space-y-2">          <Skeleton className="h-4 w-[250px]" />          <Skeleton className="h-4 w-[200px]" />        </div>      </div>    </div>  )}

import { cn } from "@/lib/utils"function Skeleton({ className, ...props }: React.ComponentProps<"div">) {  return (    <div      data-slot="skeleton"      className={cn("bg-accent animate-pulse rounded-md", className)}      {...props}    />  )}export { Skeleton }

Image galleries and media

Visual content with proper aspect ratios:

import { Skeleton } from "@/components/ui/skeleton"export default function SkeletonDemo() {  return (    <div className="w-full p-6 flex justify-center">      <div className="flex items-center space-x-4">        <Skeleton className="h-12 w-12 rounded-full" />        <div className="space-y-2">          <Skeleton className="h-4 w-[250px]" />          <Skeleton className="h-4 w-[200px]" />        </div>      </div>    </div>  )}

import { cn } from "@/lib/utils"function Skeleton({ className, ...props }: React.ComponentProps<"div">) {  return (    <div      data-slot="skeleton"      className={cn("bg-accent animate-pulse rounded-md", className)}      {...props}    />  )}export { Skeleton }

Features

This free open source skeleton component includes everything you need:

• TypeScript-first - Full type safety with loading state management
• Tailwind CSS powered - Flexible sizing with utility classes, not fixed dimensions
• Subtle animations - Gentle pulse effect that feels professional, not distracting
• Shape flexibility - Round avatars, rectangular cards, linear text placeholders
• Layout preservation - Prevents content jumping and layout shifts during loading
• Performance focused - Lightweight component that doesn't impact load times
• Accessibility ready - Screen reader friendly with proper loading announcements
• Mobile optimized - Responsive placeholders that work across all screen sizes

API Reference

Core Component

Common Sizing Patterns

Layout Strategies

Production tips

Match your actual content dimensions precisely. This free shadcn/ui skeleton component adapts to any size, but effective skeletons mirror real content layout exactly. This TypeScript component provides the placeholder—you provide dimensions that eliminate layout shift when actual content loads in your Next.js applications.

Use appropriate shapes for different content types. Round skeletons for avatars, rectangular for images, linear for text lines. This open source shadcn skeleton takes any Tailwind CSS classes—choose shapes that set accurate expectations about the content users will see.

Don't overdo the pulse animation. The subtle default animation keeps skeletons feeling alive without being distracting. This JavaScript component handles animation timing automatically—avoid custom animations that draw attention away from the loading process itself.

Test with various content lengths and screen sizes. Short and long text, different image sizes, mobile and desktop layouts. The Tailwind CSS styled component is responsive, but your skeleton dimensions should work across all the content variations users might encounter.

Show skeletons progressively for better perceived performance. Display placeholders for visible content first, then below-the-fold content as users scroll. This component renders instantly—use loading strategies that prioritize what users see immediately.

Integration with other components

Skeletons naturally work with Card components for content placeholders and Avatar components for profile loading states in your React applications. Use them within DataTable components while data fetches from APIs.

For navigation interfaces, combine skeletons with Button placeholders or Badge components for status loading. This open source pattern creates comprehensive loading experiences that match your final interface design.

When building feeds and lists, pair skeletons with ScrollArea components for long content or Separator components to organize loading sections. Sheet and Dialog components can show skeleton content while modal data loads.

For form interfaces, use skeletons with Input and Select components to show loading form fields. Your JavaScript application can compose these shadcn components while maintaining consistent loading experiences across different content types and interaction patterns.

Questions you might have