Skip to Content

Skeleton

Displays a placeholder while content is loading.

Components

Skeleton

The base placeholder. It accepts Box props and defaults to full width, 1rem height, and a medium border radius.

SkeletonText

Renders a stack of skeleton lines. It accepts Column props.

PropTypeDefaultDescription
linesnumber3Number of lines
lastLineWidthBoxProps['width']'60%'Width of the final line
lineHeightBoxProps['height']'0.875rem'Height of each line

SkeletonAvatar

Renders a circular skeleton.

PropTypeDefaultDescription
size'sm' | 'md' | 'lg''md'Avatar size

Examples

Avatar

List

List placeholders remain a composition of the base skeleton components.

Table

Custom layout