Skeleton
An animated placeholder that holds the exact shape of what's loading. Not a spinner — spinners say “something's happening”; skeletons say “here's where your content will appear”.
Usage#
- Skeletons match the shape of the content. A product card skeleton has a 4:3 image block, a short eyebrow line, a two-line title, and a CTA-shaped bar. Don't use generic grey rectangles.
- One shimmer direction per page. Left-to-right only. Mixed directions read as noise.
- Respect reduced motion. The global reduced-motion rule disables the shimmer animation; the static gray still conveys loading.
- Don't linger. If loading regularly takes more than a second, fix the perf problem; skeleton isn't a substitute.
Props#
| Name | Type | Default | Description |
|---|---|---|---|
| shape | "text" | "block" | "circle" | "block" | Geometry preset. |
| className | string | — | Custom size via Tailwind (w-*, h-*). |
Code#
tsx
import { Skeleton } from "@/components/ui/Skeleton";
<Skeleton shape="text" className="w-48" />
<Skeleton className="h-32 w-full" />
<Skeleton shape="circle" className="h-10 w-10" />