Skeleton

Animated placeholder used while content is loading. Renders as an inline-block <span>, so it can sit inside <p>, <span>, table cells, or flex rows without producing HTML-nesting errors. Width and height are driven entirely by the className you pass.

Basic

Sizing

Use any Tailwind sizing utility. size-* and h-*/w-* work because inline-block honors explicit dimensions.

Inline within text

Because Skeleton is inline-block, it can sit beside text without breaking line flow.

Card placeholder

Compose multiple skeletons to mirror the shape of the eventual content.

Custom shape

Override the default rounded-xl and background with className.