▒

Skeleton

Display

A loading placeholder with a shimmer animation that mimics the shape of the content it replaces.

Preview

Code

VUE

<Skeleton />

Props

Width

Width of the skeleton element

Height

Height of the skeleton element

Variant

Preset shape variant

Aria Label

Screen reader label for the loading state

Props API

Prop	Type	Default	Required	Description
`width`	`string`	`"100%"`	—	Width of the skeleton element
`height`	`string`	`"1rem"`	—	Height of the skeleton element
`variant`	`select`"rect" \| "text" \| "circle" \| "button"	`"rect"`	—	Preset shape variant
`ariaLabel`	`string`	`"Loading…"`	—	Screen reader label for the loading state

Usage

Match the skeleton shape and size to the content it replaces. Avoid showing skeletons for very short loading times (< 300ms) — it creates more perceived latency. Use text variant for text lines, circle for avatars, button for button placeholders.

Accessibility

Uses role="status" so screen readers announce the loading state.
The aria-label prop provides a meaningful description of what is loading.
The shimmer animation is disabled via prefers-reduced-motion.