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
beforeandafterpseudo elements to create the animation. - content: The wrapped component to show the skeleton shape. It is visible only when the
isLoadedprop istrue.
Data Attributes
Skeleton has the following attributes on the base element:
- data-loaded:
Indicates the loaded state of the skeleton. Based on the
isLoadedprop.
API
Skeleton Props
| Attribute | Type | Description | Default |
|---|---|---|---|
| children | ReactNode | The content of the skeleton. | - |
| isLoaded | boolean | Whether the skeleton is loaded. | false |
| disableAnimation | boolean | Whether to disable the animations. | false |
| classNames | Record<"base"｜"content", string> | Allows to set custom class names for the skeleton slots. | - |
