Feedback

Skeleton

A placeholder shown while content loads.

stableCSS onlyhydrateless/skeleton.css

A placeholder shown while content loads. data-hl-shape picks a text line, a circle, or a rectangle. Mark it aria-hidden="true" so screen readers skip it. The shimmer respects prefers-reduced-motion. CSS-only.

Playground

Live

Shapetextrectcircle

Props

The framework bindings expose these props (and forward the rest to the root element).

Prop	Type	Default	Description
shape	'text' | 'circle' | 'rect'	'text'	Shape of the placeholder; renders `data-hl-shape`.
width	string	Not set	Maps to the `inline-size` inline style.
height	string	Not set	Maps to the `block-size` inline style.

CSS variables

Override these on any ancestor to theme the component. See the theme studio to preview changes live.

CSS variable	Used for
--hl-surface-2	Base color of the placeholder.

Accessibility

• Mark skeletons aria-hidden="true" so assistive tech skips placeholder noise.
• The shimmer animation is disabled under prefers-reduced-motion.

Related

SpinnerA loading indicator that inherits currentColor.ProgressA progress bar built on the native <progress> element.AvatarA user image with a graceful text fallback.