Skeleton
Use to show a placeholder while content is loading. Perfect for improving perceived performance in React applications with Next.js, TypeScript, and Tailwind CSS.
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.
Basic user info
Clean placeholder for profile data:
Just gray boxes that pulse softly, sized and positioned to match your real content. This free open source React component keeps users engaged during loading states without making them stare at spinners.
npx shadcn@latest add skeletonWhy skeletons beat loading spinners
Skeletons feel faster even when they're not:
- Perceived performance - Users see structure immediately
- No layout shift - Content loads into exact placeholder positions
- Context preservation - Shows what's coming, not just "something is loading"
- Professional feel - Like the apps users actually enjoy using
- Reduced anxiety - Clear expectation of what's loading
- Better UX - Keeps users oriented while waiting
Loading states that actually help
Product and article cards
Grid layouts with proper spacing:
Dynamic lists
User feeds and data tables:
These patterns match real loading scenarios - product grids, social feeds, admin dashboards. The skeleton shapes tell users exactly what they're waiting for.
Perfect for any loading state
Works anywhere you fetch data - API calls, image loads, component lazy loading, page transitions. Much better than showing nothing or a generic spinner that tells users absolutely nothing about what's happening.
Drops right into Next.js projects. Full TypeScript support. Styled with Tailwind CSS to match the shadcn design system.
Smart loading patterns
The best skeletons mimic your actual content:
- Match real dimensions - Same width, height, spacing as loaded content
- Show structure - Indicate headings, paragraphs, images, buttons
- Use proper shapes - Round for avatars, rectangular for images, lines for text
- Animate subtly - Gentle pulse keeps it alive without being distracting
- Load progressively - Show skeletons for visible content first
- Replace exactly - Content should appear in skeleton's exact position
API Reference
Skeleton
Simple loading placeholder component.
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | - | Additional CSS classes for sizing and styling |
The skeleton automatically handles the pulsing animation and base styling. You control the size, shape, and position with Tailwind classes.
Common Sizing Patterns
| Pattern | Class Example | Use Case |
|---|---|---|
| Avatar | h-12 w-12 rounded-full | Profile pictures, user avatars |
| Text line | h-4 w-[250px] | Headlines, paragraph lines |
| Image | h-[200px] w-full rounded-xl | Product images, thumbnails |
| Button | h-9 w-28 rounded-md | Action buttons, CTAs |
| Badge | h-6 w-16 rounded | Tags, status indicators |
| Card | h-[125px] w-[250px] rounded-xl | Content cards, previews |
Layout Strategies
| Strategy | Implementation | Best For |
|---|---|---|
| Exact match | Mirror real content dimensions | Single item loading |
| Grid placeholder | Show skeleton grid layout | Product catalogs, galleries |
| List structure | Repeat skeleton list items | Feeds, search results, tables |
| Progressive | Show skeletons for visible items first | Long lists, infinite scroll |
| Sectioned | Different skeletons for content sections | Complex dashboards, multi-part pages |
Animation Control
The skeleton includes a subtle pulse animation by default. You can customize or disable it:
/* Disable animation */
.no-pulse {
animation: none;
}
/* Custom pulse speed */
.slow-pulse {
animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}Design tips for better skeletons
Keep these in mind when building loading states:
- Size it right - Measure your real content and match those dimensions
- Show hierarchy - Bigger skeletons for headlines, smaller for descriptions
- Group logically - Space skeleton elements like your real layout
- Don't overdo animation - Subtle pulse, not distracting flash
- Test different content - Skeletons should work for short and long text
- Consider mobile - Make sure skeleton layout works on small screens
- Replace smoothly - Content transition should feel seamless, not jarring
- Use consistent shapes - Round for circular content, rectangular for blocks
Sheet
Extends the Dialog component to display content that complements the main content of the screen. Perfect for sidebars, forms, and secondary content in React applications with Next.js and TypeScript.
Slider
An input where the user selects a value from within a given range. Perfect for settings, filters, and controls in React applications with Next.js, TypeScript, and Tailwind CSS.