Skeleton

Overview

Skeletons indicate that content is loading. They preserve layout, reduce visual shifts, and help users understand that text, media, or interface elements will appear soon.

<div style={{ display: "flex", gap: 12 }}>
	<Skeleton variant="round" height={48} />
	<div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
		<Skeleton variant="box" width={200} height={28} />
		<Skeleton variant="box" width={150} height={12} />
	</div>
</div>

Usage Guidelines

• Match the content's layout: Use skeletons that match the size and structure of the content they replace. This keeps the interface stable and reduces layout shifts.
• Show only the essential structure: Use enough skeletons to convey the layout and hierarchy of the loading content. Do not create a placeholder for every element.
• Use only while loading: Show skeletons when content is expected soon, and replace them as soon as real content becomes available.

API Reference

Skeleton

Examples

Text

Text skeletons are used as placeholders for prominent text elements, such as titles and subtitles. Text skeletons automatically match the dimensions of the text they replace.

<h2>{isDataLoaded ? data.title : <Skeleton variant="text" />}</h2>
<p>{isDataLoaded ? data.body : <Skeleton variant="text" />}</p>

Round

Round skeletons are used as placeholders for circular and pill-shaped elements, such as avatars or buttons.

<Skeleton variant="round" height={40} />

Box

Box skeletons are used as placeholders for square or rectangular elements, such as images.

<Skeleton variant="box" width={40} />