Skeleton
Use to show a placeholder while content is loading.
Made by shadcnPowered by
Loading component...
When to use
Skeletons show content placeholders during loading states. Use this decision tree:
Installation
Usage
import { Skeleton } from "@/components/ui/skeleton"<Skeleton className="w-[100px] h-[20px] rounded-full" />Anatomy
The Skeleton component provides loading state placeholders:
Skeleton
├── Base element (div)
├── Animated background - shimmer effect
├── Customizable dimensions - width/height via className
├── Shape control - rounded variants
└── Content-aware sizing - matches target contentExamples
Card
Loading component...
Credits
- We take our inspiration from Shadcn UI for the skeleton style.
Built by malinskibeniamin. The source code is available on GitHub.