Skeleton

Skeleton renders a low-fidelity, pulsing placeholder that reserves layout space while content loads. Use it to reduce perceived latency for text lines, avatars, thumbnails, and card shells instead of a spinner. Shape and size are controlled entirely through utility classes on the class prop.

Shapes

Shape and size come entirely from class — a text line, a circle for an avatar, a rounded tile for a thumbnail. There is nothing else to configure, which is the point: a skeleton is only ever the shape of what is coming.

Mirroring the real layout

A skeleton must have the same shape as the loaded page — same rows, same grid spans, same order. One that differs causes a layout jump the moment the data lands, which is worse than having shown nothing.

API

Prop Type Default Description
class string

Tailwind utility classes that define the placeholder shape and size (e.g. h-4 w-32 for a text line, size-12 rounded-full for an avatar). Merged with the base bg-muted/20 animate-pulse rounded styles.