On This Page
Placeholder elements that mimic layout structures while content loads.
layout placeholdersReducing perceived latency during data fetching (loading feed items, user profile blocks)circular skeletonsRepresenting avatars, profile badges, circular buttons, and status iconslines & paragraphsSimulating dynamic line lengths of block copy text or headers to prevent page layout jumps| Prop | Type | Default | Description |
|---|---|---|---|
| width | string | number | — | The width value of the skeleton (e.g. 100%, 150px, or numeric). |
| height | string | number | — | The height value of the skeleton. |
| variant | "line" | "circle" | "rect" | "rect" | The shape type variant. |
| count | number | 1 | The number of rows of skeletons to render. |
| animated | boolean | true | Whether to render a dynamic sliding shimmer background. |
| className | string | — | Additional custom class names. |
aria-busy="true" on container layouts that are currently rendering skeleton assets to inform screen readers of the active load operation.aria-hidden="true", while exposing a single aria-live loading message elsewhere.