Select UI framework
Skeleton
A skeleton component that provides a placeholder preview of your content before the data gets loaded.
Loading...
import { Skeleton } from "@/components/ui/skeleton"
export function SkeletonDemo() {
return (
<div className="flex items-center space-x-4">
<Skeleton shape="circle" className="h-12 w-12" />
<div className="space-y-2">
<Skeleton className="h-4 w-[250px]" />
<Skeleton className="h-4 w-[200px]" />
</div>
</div>
)
}
Installation
pnpm dlx shadcn@latest add skeleton
Usage
import { Skeleton } from "@/components/ui/skeleton"<div className="flex items-center space-x-4">
<Skeleton shape="circle" className="h-12 w-12" />
<div className="space-y-2">
<Skeleton className="h-4 w-[250px]" />
<Skeleton className="h-4 w-[200px]" />
</div>
</div>Examples
Card Skeleton
Loading...
import { Skeleton } from "@/components/ui/skeleton"
export function SkeletonCard() {
return (
<div className="flex flex-col space-y-3">
<Skeleton className="h-[125px] w-[250px] rounded-xl" />
<div className="space-y-2">
<Skeleton className="h-4 w-[250px]" />
<Skeleton className="h-4 w-[200px]" />
</div>
</div>
)
}
List Skeleton
Loading...
import { Skeleton } from "@/components/ui/skeleton"
export function SkeletonList() {
return (
<div className="space-y-4">
{[...Array(5)].map((_, index) => (
<div key={index} className="flex items-center space-x-4">
<Skeleton shape="circle" className="h-10 w-10" />
<div className="flex-1 space-y-2">
<Skeleton className="h-4 w-full" />
<Skeleton className="h-3 w-3/4" />
</div>
</div>
))}
</div>
)
}
Shapes
Loading...
import { Skeleton } from "@/components/ui/skeleton"
export function SkeletonShapes() {
return (
<div className="space-y-6">
<div>
<h4 className="mb-3 text-sm font-medium">Rounded</h4>
<div className="space-y-2">
<Skeleton shape="rounded" className="h-4 w-[300px]" />
<Skeleton shape="rounded" className="h-4 w-[250px]" />
<Skeleton shape="rounded" className="h-4 w-[200px]" />
</div>
</div>
<div>
<h4 className="mb-3 text-sm font-medium">Square</h4>
<div className="space-y-2">
<Skeleton shape="square" className="h-4 w-[300px]" />
<Skeleton shape="square" className="h-4 w-[250px]" />
<Skeleton shape="square" className="h-4 w-[200px]" />
</div>
</div>
<div>
<h4 className="mb-3 text-sm font-medium">Circle</h4>
<div className="flex space-x-2">
<Skeleton shape="circle" className="h-12 w-12" />
<Skeleton shape="circle" className="h-10 w-10" />
<Skeleton shape="circle" className="h-8 w-8" />
</div>
</div>
<div>
<h4 className="mb-3 text-sm font-medium">No Animation</h4>
<div className="space-y-2">
<Skeleton variant="none" className="h-4 w-[300px]" />
<Skeleton variant="none" className="h-4 w-[250px]" />
<Skeleton variant="none" className="h-4 w-[200px]" />
</div>
</div>
</div>
)
}
API Reference
Skeleton
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "pulse" | "none" | "pulse" | The animation variant of the skeleton. |
shape | "circle" | "rounded" | "square" | "rounded" | The shape of the skeleton. |
className | string | undefined | Additional CSS classes to apply to the skeleton. |
Examples
The skeleton component supports different shapes and animation variants to match your content:
- Circle: Perfect for avatars and profile pictures
- Rounded: Great for cards, buttons, and general content
- Square: Useful for images and square elements
- No Animation: Static skeleton without pulse animation