Skeleton
A loading placeholder component that mimics the structure of content while it loads.
Basic
A skeleton fills its container's width and is 24px tall. Set width and height, or size it with classes.
Default
Custom width
Custom height
List row
Match the shape of the row that will load: an avatar, two lines of text, and an action.
Content blocks
A paragraph placeholder. Shorten the last line so it reads as text.
Metric cards
Keep the final layout in place while the data loads, here three metric cards.
Text lines
SkeletonText stands in for one line of text. Pass the typography class of the text it replaces so the placeholder takes the same line height.
Animation
Skeletons pulse by default. Set animate={false} for a static placeholder.
Animated (default)
Static
Usage
Skeletons render with aria-hidden, so they are not announced.
Skeleton Properties
Width of the skeleton
Default: 100%
Height of the skeleton
Default: 24px
Additional CSS classes to apply to the skeleton
Whether to show the pulse animation
Default: true
Additional inline styles to apply to the skeleton
SkeletonText Properties
Typography class of the text it stands in for. Sets the line height.
Width of the placeholder bar
Default: 100%