Skeleton is a placeholder component used to display loading states before content is available.
It creates a pulsing animation effect that indicates to users that content is being loaded.
Use Tailwind classes to size and customize the skeleton.
The simplest way to use the Skeleton component is to render it as a rectangle or a circle, with your desired size and border radius using Tailwind classes.
Skeleton is a standalone component.
The Skeleton component displays a loading placeholder animation to indicate that content is being loaded. It's useful for improving perceived performance by showing the structure of content before it's available.
| Skeleton Slots | Description |
|---|---|
default | The default slot. Content placed here will have the skeleton loading effect applied to it. You can place any element or component here to create skeleton versions of your UI. |
A typical skeleton placeholder for card or content layouts, using stacked rectangles.
Combines a circle skeleton (replacing an avatar) with text and a content block.