Skeleton
React skeleton placeholder that mimics the shape of loading content: text lines, circles, cards, and inline shapes, with a shimmer that respects reduced motion.
Skeleton fakes the shape of loading content. It is aria-hidden, so mark the loading surface itself with aria-busy="true".
When to use
Use Skeleton when the layout of incoming content is known, such as a list of cards or a profile header. The page then keeps its shape while data loads. Match the skeleton to the final layout to avoid a jump.
For an unknown or short wait, a Spinner is enough. Do not show skeletons for more than a few seconds without feedback.
Examples
Welcome back,
! Your profile is loading.Props
Props declared by Skeleton. Native attributes of the underlying element pass through.
| Prop | Type | Default | Description |
|---|---|---|---|
shape | "circle" | "text" | "square" | "rectangle" | ||
animation | "none" | "shimmer" | ||
width | string | number | Inline width override (any valid CSS length, e.g. "60%", 200, "4rem").
Defaults: text → 100%; rectangle → 100%; circle/square → 40px. | |
height | string | number | Inline height override. Defaults: text → 1em (tracks line-height, ≈ SDGA Line 22/14);
rectangle → 40px (= SDGA Large); circle/square → matches width (aspect-ratio 1). |
Accessibility
Skeleton is aria-hidden, so it is invisible to screen readers. Mark the loading surface with aria-busy="true" and announce completion through a live region when the content arrives.
The shimmer animation is disabled when the user prefers reduced motion.