Skeleton
Placeholder loading state showing content structure before it loads
A skeleton is a shimmering placeholder that holds an element's shape while its content loads. Use it for the initial load of cards, lists, tables, or text, in place of a spinner, to preview the layout that is about to appear.
Preview
Installation
Usage
Examples
Synchronized Sweep
The shimmer is anchored to the viewport, so one highlight sweeps across every skeleton on the page in unison.
Inverted
Use inverted to flip the shimmer highlight from light to dark on surfaces where the default sheen is too bright.
Multi-line Text
Use multiline to render the skeleton inline so it wraps across multiple lines with its parent text.
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
Pass children to inherit their dimensions, hiding them under the shimmer until they load.
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.