Skeleton

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


Installation

npx nextui-cli@latest add skeleton
The above command is for individual installation only. You may skip this step if @nextui-org/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

AttributeTypeDescriptionDefault
childrenReactNodeThe content of the skeleton.-
isLoadedbooleanWhether the skeleton is loaded.false
disableAnimationbooleanWhether to disable the animations.false
classNamesRecord<"base"|"content", string>Allows to set custom class names for the skeleton slots.-