Skeleton
Placeholder loading state showing content structure before it loads
Preview
Installation
Usage
Examples
Synchronized Sweep
The shimmer is positioned relative to the viewport, so a single highlight passes across every skeleton on the page in unison. This makes grouped loading states feel coordinated rather than each element animating on its own.
Inverted
Flips the shimmer highlight from light to dark. Useful when the skeleton sits on a light surface where a bright sheen is too loud, or on a dark surface in dark mode where a darker band reads more naturally.
Multi-line Text
Pass multiline to render the skeleton as an inline element that wraps with its parent text. Each line fragment picks up the shimmer as the same viewport-wide wave sweeps across.
This is a paragraph with a skeleton loading effect that spans multiple lines. The shimmer flows across every line fragment as one continuous wave, not a separate animation per line.
Wrapping Content
Wrap existing elements to automatically match their dimensions. The skeleton inherits the size of its children while hiding them with a shimmer overlay.
shadcn
@shadcn
API Reference
Props
Skeleton
Animated placeholder that displays a shimmer effect. Can be used standalone with explicit dimensions or as a wrapper around content.