Skip to content

Skeleton

Placeholder loading indicators for content that is still being fetched.

Text

Text skeleton with configurable line count.

1 line

3 lines

Shapes

Circular and rectangular skeleton variants.

Circular

Rectangular

Card

Pre-built skeleton card for common card loading patterns.

Loading Pattern

Toggle between skeleton loading state and actual content.

PropTypeDefaultDescription
variant"text" | "circular" | "rectangular""text"The shape variant of the skeleton.
widthstring | numberWidth of the skeleton element.
heightstring | numberHeight of the skeleton element.
linesnumber1Number of text lines to render (only for text variant).
classNamestringAdditional CSS class name.

SkeletonCard

PropTypeDefaultDescription
classNamestringAdditional CSS class name for the card skeleton.

Related Components