Skeleton
Each example below is a real component instance — flip the theme toggle to see how it adapts.
Default#
Layout#
Loading…
Props#
| Prop | Type | Default | Description |
|---|---|---|---|
| width | string | number | undefined | 100% | Width override — accepts any CSS length, e.g. `'70%'`, `120`. |
| height | string | number | undefined | — | Height override. Defaults differ by shape: `line` = 14, `block` = 80, `circle` = 40. |
| standalone | boolean | undefined | false | Render this Skeleton as its own loading announcement (`role="status"`, `aria-busy="true"`, `aria-label="Loading"`). Default `false` — Skeleton is `aria-hidden` so a list of N skeletons does not announce N times. Wrap a group of Skeletons in `<SkeletonGroup>` to get a single aggregate announcement, or set `standalone` when rendering a single isolated Skeleton with no surrounding live region. |
| shape | "circle" | "line" | "block" | null | undefined | line |