display contract
Skeleton
Loading placeholder that mirrors the shape of the eventual content.
Variants
- rect
- text
- circle
Sizes
- sm
- md
- lg
Example
<Card><CardContent><Skeleton variant="rect" className="h-32 w-full" /></CardContent></Card>Usage rule
Animate with subtle gradient shimmer (1.6s linear loop) — never a solid pulse.
The full Skeleton contract has 3 more rules, plus the do-not patterns. Get the full recipe.