SkeletonBox

A SkeletonBox provides a placeholder for non-text, non-Avatar elements (e.g., hero images) that are still loading.

Page navigation navigation

React

ready

Figma

<SkeletonBox width={200} height={200} />

<SkeletonBox width={200} height={200} />

Name	Default	Description
delay	`false`	`'short' \| 'long' \| number` Controls whether and how long to delay rendering the SkeletonBox. Set to 'short' to delay by 300ms, 'long' to delay by 1000ms, or provide a custom number of milliseconds.
width		`string` Width of the skeleton box. Accepts any valid CSS `width` value.
height	`1rem`	`string` Height of the skeleton box. Accepts any valid CSS `height` value.
className		`string` The className of the skeleton box