Skeleton
A placeholder in the shape of content that loads.
Shapes and content
Use this for content that takes long enough to load that users notice. Placeholders match the shape and size of the content. Use the button to switch.
Usage
These are defaults, not laws. Break one when you have a good reason, or when it makes the design more cohesive or more interesting.
- Wrap the real layout in Skeleton. While it loads, Skeleton hides the content and draws the placeholder in exactly its space, so nothing moves when it loads. Render sample text in place of data that has not arrived.
- Without children, set lines, width, and height to estimate the size of content you cannot render yet.
API
Props that the library adds. Every part also takes all the Base UI props.
Skeleton
| Prop | Type | Default | Description |
|---|---|---|---|
| shape | 'text' | 'rect' | 'circle' | 'text' | The placeholder shape. |
| width | number | string | – | A width in pixels or a CSS value. Used without children. |
| height | number | string | – | A height in pixels or a CSS value. Used without children. |
| lines | number | 1 | The number of text lines. Used without children. |
| loading | boolean | true | Shows placeholders when true. Shows children when false. |
| children | ReactNode | – | The content. While loading, it sets the size and shape of the placeholder. |
| className | string | – | Classes for the placeholder, or for the wrapper around children. |