Skeleton
View on StorybookStorybookAnimated 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.
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.
LTR (English)
RTL (العربية)
Use Cases
Content placeholders during loading
Card and list shimmer effects
Image placeholder before load
Dashboard widget loading states
Best Practices
Do
- ✓ Match skeleton shape to actual content layout
- ✓ Use subtle animation to indicate loading
- ✓ Show skeletons immediately — don't delay
Don't
- ✗ Don't show skeletons for more than a few seconds — show error state
- ✗ Don't use for instant-load content
- ✗ Don't mismatch skeleton shape and real content layout