Skeleton
A shimmer placeholder that handoffs to real content with a mask wipe or staggered reveal.
API reference
Components
<Skeleton />
A single skeleton placeholder with a compositor-only shimmer sweep.
animate?
Run the shimmer when true; hold a steady block when false. Defaults to true.
className?
Merged onto the bone. Size and shape the placeholder here.
style?
Extra inline styles, merged onto the bone.
children?
Rendered invisibly to size the bone to the real content geometry.
<SkeletonReveal />
Single-card load handoff via a left-to-right skeleton wipe.
loading
Whether the skeleton is showing (true) or loaded content has taken over (false).
skeleton
The skeleton placeholder, shown while loading.
children
The loaded content, shown once loading is false.
name?
Shared view-transition name for the handoff. Defaults to velocity-skeleton-card.
className?
Merged onto the wrapper around the handoff.
<SkeletonResolveList />
Shares one loading flag with nested SkeletonResolveRows. Renders no DOM of its own.
loading
Whether the feed is still loading. Shared with every nested row.
children
The rows. Rendered as-is so you own the list element.
stagger?
Per-row delay step, in seconds. Defaults to the theme's base stagger.
<SkeletonResolveRow />
One row of a staggered skeleton resolve with zero layout shift.
index
This row's position, used to stagger its handoff.
content
The real content layer in normal flow.
skeleton
The bones overlay, faded out as the row resolves.
loading?
Whether the feed is loading. Inherited from SkeletonResolveList when omitted.
stagger?
Per-row delay step, in seconds.
className?
Merged onto the row wrapper.
Hooks
useSkeletonSweep
Resolves the shimmer gate and cadence for a skeleton bone.
useSkeletonSweep(options: UseSkeletonSweepOptions<T>): SkeletonSweepref
Ref to the element whose viewport presence gates the loop.
active?
Your own gate, e.g. !loaded. Defaults to true.
Returns
shimmering
True when the shimmer should run.
sweepTransition
The token-derived infinite tween for the sweep overlay.
useSkeletonResolve
Resolves crossfade timing and animate targets for one staggered skeleton row.
useSkeletonResolve(options: UseSkeletonResolveOptions): SkeletonResolveindex
This row's position, used to stagger its handoff.
loading
Whether the feed is still loading.
stagger?
Per-row delay step, in seconds. Defaults to the theme's base stagger.
Returns
loaded
True once this row has resolved to its loaded content.
motionAllowed
Whether full motion is allowed.
transition
Transition for both layers, carrying the per-row delay.
content
animate target for the real-content layer.
skeleton
animate target for the bones overlay.
Featured in
See the skeleton composed into full sections.
