ComponentsFeedback and overlays

Skeleton

Skeletons hold the shape of content that is still loading, so the layout does not jump when it arrives. Use them for the first load of cards, lists and tables; use a progress indicator for actions.

Shapes and sizes

Text follows the font size, Circle suits avatars and Rectangle suits media. Width and Height take any CSS length.

Text (default)

Circle

Rectangle

Every shape and animation

All combinations of SkeletonType and Animation. Pulse is the default; Animation.False keeps it still for people who prefer reduced motion.

MudSkeleton: SkeletonType × Animation
SkeletonType ↓ · Animation →	False	Pulse	Wave
Text
Circle
Rectangle

A loading card that swaps to content

The skeleton mirrors the card's real layout. The container reports aria-busy while it loads, and leaving the page cancels the work.

Mira Rautio

Staff pick · Fiction

The Cartographer's Daughter

A quiet novel about maps, memory and a coastline that keeps changing.

A table placeholder

Skeleton rows keep the header and column widths stable until the data arrives.

Title	Author	Copies
Salt and Stone	Inés Vidal	3
A Field Guide to Moths	Peter Okonkwo	1
Winter Orbit	Hana Sato	5
The Lighthouse Keeper	Elif Demir	2