Component · 18

Skeleton

A placeholder for content that is still loading: unprinted paper, a hatch of hairlines that breathes. It is a plain element with no JavaScript, so it works in Server Components.

A card that is loading

Give the container aria-busy so assistive tech knows the content is on its way.

tsx

<section aria-busy="true" aria-label="Profile">
  <Skeleton shape="circle" style={{ width: 48, height: 48 }} />
  <Skeleton style={{ width: "60%" }} />
  <Skeleton style={{ height: 12 }} />
  <Skeleton style={{ height: 12, width: "80%" }} />
</section>

Shapes

tsx

<Skeleton shape="circle" />
<Skeleton style={{ width: 160, height: 24 }} />

Props

Prop	Type	Default	Description
shape	"block" \| "circle"	"block"	Circle is for avatars.
width / height	via style or className	100% / 1rem	Skeletons take their size from you, so the layout does not jump when content arrives.
aria-hidden	boolean	true	It is decoration, so screen readers skip it.

Skeletons suit content whose shape you know. For a task that just takes time, use Progress.