TrademarkTrademark
Docs
Ctrl k
Search docs...
Components

Skeleton

Updated: October 18, 2026
View on GitHub
Soon
Not released yet. This is on main and is not in any published version yet. It will not install today.

Skeleton is a grey shape that pulses while content loads. It comes as a line, a circle or a block. The pulse holds still when the device's reduce motion setting is on. Screen readers read it as "Loading". See the web Skeleton page for the web version.

Shape and size

line fills the width and takes its height from size, from xs (the 8 step) to xl (the 24 step). circle takes its width and height from size, from xs (the 20 step) to xl (the 160 step). block fills the width at the 80 step tall. width and height override the size, in points or as a percentage.

Delay

delay waits that many milliseconds before the pulse starts. Give each skeleton in a group a longer delay to stagger them.

API reference

Skeleton does not take Flex props. Use style for margins.

Prop
Type
Default
Description
shape"line" | "circle" | "block""line"The placeholder shape.
size"xs" | "s" | "m" | "l" | "xl""m"The height of a line, or the diameter of a circle.
widthDimensionValueOverrides the width, in points or a percentage.
heightDimensionValueOverrides the height, in points or a percentage.
delaynumber0Milliseconds before the pulse starts.
styleViewStyleStyle for the skeleton.
Edit this page on GitHub
TrademarkTrademark
Built with curiosity by Lorant One and the Design Engineers Club