Actions and status

Skeleton

Render a loading placeholder surface or text-line group. The ghostly apparition of content yet to come, now with better manners for assistive tech.

Curated demo

Reference

Render a loading placeholder surface or text-line group. The ghostly apparition of content yet to come, now with better manners for assistive tech.

Use Skeleton only while real content is pending.
Match the final content shape as closely as possible, so the page doesn't jump around when it loads.
Prefer one announced loading region over many noisy placeholders; skeletons are aria-hidden unless ariaLabel is provided.
Focus mode and reduced-motion preferences both suppress shimmer in favor of static loading surfaces.

Props

Name	Type	Default	Description
`width`	`string`	`'100%'`	Placeholder width.
`height`	`string`	`'1rem'`	Placeholder height.
`size`	`string`	—	Square size used by circle skeletons.
`shape`	`'rect' \| 'circle' \| 'text'`	`'rect'`	Placeholder shape.
`lines`	`number`	`1`	Number of text lines to render.
`gap`	`1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8`	`2`	Spacing token between text lines.
`lastLineWidth`	`string`	`'75%'`	Width of the final line in a multi-line text skeleton.
`radius`	`string`	—	Radius token name or custom CSS radius.
`animate`	`boolean`	`true`	Whether shimmer animation is enabled when user preferences allow it.
`ariaLabel`	`string`	—	Optional accessible loading announcement for a skeleton region.
`ariaHidden`	`boolean`	—	Force skeleton assistive-tech visibility.
`class`	`string`	—	Additional CSS classes.

Example snippet

<Stack space={4}>
  <Skeleton shape="circle" size="3rem" />
  <Skeleton shape="text" lines={3} lastLineWidth="60%" />
  <Skeleton width="100%" height="8rem" radius="xl" ariaLabel="Loading card" />
</Stack>