Components
Skeleton
A pulsing placeholder that reserves layout space while content loads, reducing perceived latency and preventing layout shift.
Basic usage
Compose blocks of different sizes to mirror the shape of the content they stand in for. Size and rounding are controlled entirely through className.
Card placeholder
Stack skeletons to outline an entire component — here a media card with an image, title, body lines, and an avatar row.
Shapes
Use rounded-full for avatars and chips, rounded-lg for thumbnails, and a slim height with rounded-full for text lines.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | — | Tailwind classes that define the placeholder’s size and shape — set width, height, and rounding here. |
...rest | React.ComponentProps<'div'> | — | All native div attributes (style, id, aria-*, data-*) are forwarded to the underlying element. |
Accessibility
- Skeletons are purely decorative — wrap the loading region in a container with
aria-busy="true"so assistive tech knows content is pending. - Announce completion with an
aria-liveregion rather than relying on the visual swap, since screen reader users will not see the pulse animation. - The
animate-pulseanimation respects the user’sprefers-reduced-motionsetting and stops for those who request reduced motion. - Match the skeleton’s footprint to the real content to avoid layout shift (CLS) when the data resolves.