Components
Skeleton
Placeholder loading state to indicate content is being fetched or processed.
Text Lines
Card
Avatar with Text
Different Shapes
Blog Post Card
List Items
Installation
Usage
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