Decorative loading placeholder shapes. Always aria-hidden; announce busy state on the host.
Also known as: loading placeholder, shimmer, pulse placeholder
Install with the CLI, or copy the component source into your project.
Add skeleton (npm)
1npx --yes -p @default-file/ui df-ui add skeleton
Text placeholder at the default width and height. The root is always aria-hidden.
Text line, block, and circle silhouettes.
Override instance size with width and height. Prefer spacing and size tokens.
Compose shapes into a card placeholder. Keep aria-hidden on each Skeleton and set aria-busy on the host.
Decorative loading placeholder. Always aria-hidden; the host must announce busy state elsewhere.
| Prop | Type | Default | Notes |
|---|---|---|---|
| shape | "text" | "block" | "circle" | "text" | Placeholder silhouette. |
| width | string | - | Inline CSS width for this instance. |
| height | string | - | Inline CSS height for this instance. |
| className | string | - | Additional styles on the root. |
Decorative only: The root is always aria-hidden. Pair with a parent aria-busy, a Spinner with a name, or live status copy so assistive technology hears the wait.