Skeleton
A placeholder component used to indicate that content is loading.
Overview
Skeleton is a visual placeholder used to indicate loading content. It helps reduce layout shift and gives users a sense of what content is expected while data is being fetched or computed.
Use Skeleton when you're loading text, buttons, cards, or any other UI elements where the final content isn't yet available.
Examples
Basic Usage
A single skeleton block representing a line of text or small UI item.
Complex Usage
Props
The Skeleton component accepts all standard props for a <div> element. You can customize its appearance using className to control:
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | — | Tailwind or custom classes to style the shape |
...props | div | data-slot="skeleton" | Any valid div props will be passed through |
Design Details
- Background color: Uses
var(--color-neutral-100, #F5F5F5)by default. - Border radius: Defaults to
rounded-full. - Animation: Pulse animation is applied by default.
Accessibility
Skeletons should not be announced to screen readers. Since Skeleton renders a <div>, avoid adding semantic roles or text content unless the skeleton is accompanied by a proper aria-busy or hidden label in the loading container.