Skeleton

Updated: May 9, 2025

Use Skeleton to maintain layout consistency and improve perceived performance during data loading states.

Skeleton

<Skeleton shape="circle" size="l" />
<Skeleton shape="line" delay={100} width="50%" size="xs" />
<Skeleton shape="line" delay={200} width="75%" size="s" />
<Skeleton shape="block" delay={300} minHeight="80" />

Shape

Skeletons can be shaped as lines, circles, or blocks.

Shapes

<Skeleton shape="line" size="xs" />
<Skeleton shape="circle" />
<Skeleton shape="block" minHeight="48" />

Size

Control the visual dimensions using predefined size tokens.

Size

<Skeleton shape="line" size="xl" width="100%" />
<Skeleton shape="line" size="l" width="75%" />
<Skeleton shape="line" size="m" width="50%" />
<Skeleton shape="line" size="s" width="33%" />
<Skeleton shape="line" size="xs" width="25%" />

Animation delay

Apply delay classes to stagger loading effects for multiple items.

Delay

<Skeleton shape="line" width="75%" delay={100} />
<Skeleton shape="line" width="50%" delay={200} />
<Skeleton shape="line" width="33%" delay={300} />

API reference

Prop	Type	Default
shaperequired A line of text, a circle, or a filled block.	linecircleblock	line
size Height of a line, or diameter of a circle. Width comes from Flex.	xllmsxs	m
delay Milliseconds before the shimmer starts, to stagger a set.	number	—
style	React.CSSProperties	—
className	string	—
…and every FlexProps prop	inherited	—

ComponentsSetting

ComponentsSlider

Edit this page on GitHub

Built with curiosity by Lorant One and the Design Engineers Club