Dowe

DISPLAY

Skeleton

Skeleton reserves the shape of content while a page waits for data, with target-owned pulse, wave, or static animation.

SHAPE BEFORE DATA

Protect layout stability

Match the eventual content dimensions so loading does not make the page jump.

PLAYGROUND

Compare placeholder shapes

Choose a variant from the content geometry, then use animation to communicate whether the wait is active or intentionally static.

TEXT

CIRCULAR

RECTANGULAR

ROUNDED

Skeleton variant:"text" animation:"wave" w:"full" h:5
Skeleton variant:"circular" animation:"pulse" w:16 h:16 rounded:"full"
Skeleton variant:"rectangular" animation:"wave" w:"full" h:28
Skeleton variant:"rounded" animation:"none" w:"full" h:28 rounded:"lg"

ADVANCED COMPOSITION

Mirror the finished dashboard

Skeleton works best when the loading tree preserves the same hierarchy as the eventual content: avatar, heading, metadata, and action region.

PULSE

Use pulse for a calm, low-frequency loading cue.

WAVE

Use wave when the content is actively being fetched or assembled.

NONE

Use none when motion is not appropriate or the placeholder is a static frame.

Card variant:"soft" scheme:"surface" p:8 rounded:"md"
  Grid columns:{ xs:1 md:"auto 1fr auto" } gap:5 align:"center"
    Skeleton variant:"circular" animation:"pulse" w:16 h:16 rounded:"full"
    Grid columns:1 gap:3
      Skeleton variant:"text" animation:"wave" w:20 h:6
      Skeleton variant:"text" animation:"wave" w:"full" h:4
    Skeleton variant:"rounded" animation:"wave" w:28 h:10 rounded:"full"

DIMENSIONS

Reserve the real space

Use w and h to reflect the content that will replace the placeholder.

MOTION

Choose one cue

A page with many placeholders should still feel like one loading state.

SEMANTICS

Do not replace copy

Keep accessible loading or status copy alongside the visual placeholder when the context needs it.

API

Props

Skeleton also accepts common spacing, sizing, visibility, radius, border, and accessibility props.

Prop	Type	Default
No data There are no records to display

No data