Skeleton
A placeholder in the shape of the content that is coming. Better than a spinner wherever the layout is known, because the page doesn’t jump when the data lands.
import Skeleton from '@/components/ui/Skeleton';Source: src/components/ui/Skeleton.tsx
Examples
Variants
Size it with utilities — the variant only decides the shape.
Matching the real card
The point is the shape. A skeleton that doesn’t match what replaces it produces exactly the layout shift it was meant to prevent.
Props
<Skeleton> props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'text' | 'rect' | 'circle' | 'text' | — |
className | string | '' | Size via utilities, e.g. className="h-[160px]" or "h-[40px] w-[40px]" for a circle. |
Accessibility
- Decorative — it carries no text. Mark the region it fills as busy (aria-busy) so a screen reader isn’t told the page is finished.