Skeleton
Shimmer placeholder for any shape of content — cards, text lines, avatars.
Install
Import path
Examples
Card placeholder
Mirror the real layout so content doesn’t jump when it loads.
Text lines
Stand in for a paragraph while content loads.
Avatar
Use to show a placeholder while content is loading.
Form
Use to show a placeholder while content is loading.
RTL
Right-to-left layout support for languages such as Arabic and Hebrew.
Translations are AI-generated for demonstration and may be imperfect.
Table
Use to show a placeholder while content is loading.
Anatomy
How the parts compose. Copy this skeleton and fill in the slots.
import { Skeleton } from "@codefast/ui/skeleton";
<Skeleton className="h-4 w-32 rounded-full" />
API reference
Props for each part of the component. All native element props are also forwarded.
Skeleton
A shimmering placeholder block. Shape it entirely with className.
| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | — | Set width, height, and radius to match the content it stands in for. |
Accessibility
Built to be keyboard-navigable and screen-reader friendly out of the box.
- Skeletons are decorative — mark the loading region with aria-busy on its container.
- Keep the skeleton’s shape close to the real content to avoid layout shift.
- Don’t leave skeletons up indefinitely; show an error state if loading fails.
Guidelines
Conventions that keep usage consistent across an app.
Do
- Match the skeleton to the final layout’s size and shape.
- Use for content that takes a noticeable moment to load.
Don’t
- Don’t use a skeleton for instant content — it just adds flicker.
- Don’t animate so strongly it distracts; keep the shimmer subtle.