Skeleton

Skeleton is a placeholder to show a loading state and the expected shape of a component.

Installation

The above command is for individual installation only. You may skip this step if @heroui/react is already installed globally.

Import

Usage

Standalone

Skeleton takes the shape of its children component by default, but you can also use it as a standalone component.

Loaded State

You can use the isLoaded prop to stop the skeleton animation and show the children component.

Slots

• base: The base slot of the skeleton, it contains the before and after pseudo elements to create the animation.
• content: The wrapped component to show the skeleton shape. It is visible only when the isLoaded prop is true.

Data Attributes

Skeleton has the following attributes on the base element:

• data-loaded: Indicates the loaded state of the skeleton. Based on the isLoaded prop.

API

Skeleton Props