Feedback
Skeleton
A loading placeholder that preserves layout.
Installation
Copy the source with the CLI to own and edit it, or import it from the npm package.
npx aback-ui@latest add skeletonWrites components/ui/skeleton.tsx. First time in this project? Run npx aback-ui@latest init first, as the installation guide shows.
Usage
Import the parts you need from the installed file. The Code tab above has a complete, working example.
import { Skeleton } from "@/components/ui/skeleton";API reference
Props and composition points for Skeleton. Native element props pass through.
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | None | Set the size and shape to match the content that will replace it. |
aria-hidden | boolean | true | The placeholder is hidden from assistive technology. |
Dependencies: no extra packages, plus the shared @/lib/utils helper.
Accessibility
Semantics, keyboard behavior, and the decisions that keep the component operable.
- Skeletons are decorative. Announce loading on the parent with aria-busy and a status message.
- Reserve the final layout size so content does not jump when it arrives.
- Do not leave a skeleton on screen indefinitely; show an error or empty state when loading ends.
- Pair pulse animation with reduced-motion handling, which the theme applies globally.
Used in production
The Aback products whose interfaces shaped this component.