Skeleton
Loading placeholder for content.
Usage
Skeleton is a shimmering placeholder you render in place of content that
has not arrived yet. It is one element with no sub-parts — you compose several to sketch the shape
of the real layout.
Variants
Three shape presets. text is 1em tall so it
inherits the surrounding font size; circle is a fixed avatar square
with a full radius; rect is a content block.
Sizing
width and height take any CSS length and win over
the variant defaults. Use percentages for ragged text lines — that is what makes a skeleton read
as text rather than as a bar chart.
Composition
Mirror the real layout. A skeleton that does not match the shape of what loads causes a visible jump when the content lands — which is worse than showing nothing.
Accessibility
The skeleton element is always aria-hidden — a screen reader reading
out a grid of empty boxes helps nobody. Put the announcement on the region that owns the
loading state with role="status" and aria-busy, and swap in the real content when it arrives.
The region announces the state; the placeholder stays silent.
Props
Plus every native <div> attribute via prop spreading. The
shimmer animation is disabled automatically under prefers-reduced-motion; the placeholder itself remains.
| Prop | Type | Default |
|---|---|---|
variant | 'text' | 'circle' | 'rect' | 'text' |
width Any CSS length. Defaults to `100%`. | string | — |
height Any CSS length. Defaults to the variant's intrinsic height. | string | — |
class | string | — |