Skeleton
Animated loading placeholder component to improve perceived performance while content loads.
Preview
Installation
Terminalbash
Usage
Reacttsx
Examples
Card Skeleton
tsx
Profile Skeleton
tsx
List Skeleton
tsx
Props
| Name | Type | Default | Description |
|---|---|---|---|
className | string | - | Additional CSS classes for custom size and shape |
The Skeleton component accepts all standard HTML div attributes.
Best Practices
When to Use
- Loading initial page content
- Fetching data from an API
- Loading images or media
- Processing user actions
Design Tips
- Match skeleton shapes to actual content dimensions
- Use multiple skeletons to represent complex layouts
- Keep skeleton patterns simple and recognizable
- Combine with cards to show content boundaries
Common Dimensions
h-4- Text line (16px)h-8- Button/Input (32px)h-12- Avatar (48px)h-48- Image/Card (192px)
Accessibility
Loading States
Add aria-busy="true" to container during loading to inform screen readers that content is being loaded.
Screen Reader Announcements
Use aria-live="polite" to announce when content finishes loading. Provide descriptive labels like aria-label="Loading content".
Best Practices
- Don't rely solely on visual loading indicators
- Provide text alternatives for screen readers
- Ensure skeleton shapes closely match final content
RTL Considerations
Skeleton components automatically adapt to RTL layout. Use space-x-reverse for horizontal spacing in RTL mode.