Skeleton
React Skeleton components are used to show placeholder layouts while content is loading. They help users understand the structure of the page before data is available and reduce perceived loading time.
This Skeleton component is built with React and styled using Tailwind CSS. It provides flexible shapes and sizes that can be combined to match real UI layouts such as text, cards, avatars, buttons, and tables.
Text Lines
Card
Avatar with Text
Different Shapes
Blog Post Card
List Items
Installation
Usage
Import the component and define the shape using utility classes.
import { Skeleton } from "@/registry/core/skeleton";
export default () => <Skeleton className="h-4 w-48" />;Examples
Text Lines
<div className="space-y-2">
<Skeleton className="h-4 w-full" />
<Skeleton className="h-4 w-5/6" />
<Skeleton className="h-4 w-4/6" />
</div>Card Skeleton
<div className="border rounded-lg p-4 space-y-3">
<Skeleton className="h-8 w-8 rounded-lg" />
<Skeleton className="h-4 w-3/4" />
<Skeleton className="h-3 w-full" />
<Skeleton className="h-3 w-5/6" />
</div>Avatar Skeleton
<div className="flex items-center gap-3">
<Skeleton className="size-10 rounded-full" />
<div className="space-y-2">
<Skeleton className="h-4 w-24" />
<Skeleton className="h-3 w-32" />
</div>
</div>Different Shapes
{ /* Circle */ }
<Skeleton className="size-12 rounded-full" />;
{ /* Square */ }
<Skeleton className="size-12 rounded-lg" />;
{ /* Rectangle */ }
<Skeleton className="h-32 w-48 rounded-lg" />;
{ /* Line */ }
<Skeleton className="h-4 w-full" />;Button Skeleton
<Skeleton className="h-10 w-24 rounded-lg" />Table Skeleton
<div className="space-y-3">
<Skeleton className="h-10 w-full rounded-lg" />
<Skeleton className="h-8 w-full" />
<Skeleton className="h-8 w-full" />
<Skeleton className="h-8 w-full" />
</div>API Reference
Skeleton
Extends div element props.
| Prop | Type | Description |
|---|---|---|
className | string | Additional CSS classes |
Accessibility
- Uses
divelement as a non-semantic placeholder - Should be replaced with actual content when data loads
- Provides visual feedback during loading states
- Animation respects
prefers-reduced-motionuser preference
Notes
- Default height is
12px(0.75rem) withh-3class - Default shape is fully rounded with
rounded-fullclass - Uses a custom pulse animation for smooth loading effect
- Override dimensions and shape with Tailwind utility classes
- The animation uses
animate-pulse-customwhich should be defined in your Tailwind config - Gray background (
bg-neutral-200) provides neutral placeholder appearance