Skeleton
A Skeleton component is a placeholder UI element that represents the layout of content before it loads. It typically features a grey or light-colored shape mimicking the structure of the actual content (such as text blocks, images, or buttons) to indicate that loading is in progress. Skeleton components enhance user experience by providing a visual cue that content is being fetched, reducing perceived loading times and preventing layout shifts.
# Demo
Basic Skeleton Examples
Simple skeleton components for different content types.
Text Lines
Different Shapes
Avatar with Text
Card Skeleton Layouts
Skeleton layouts for different card types.
Interactive Loading Demo
Toggle between skeleton and loaded states.
User Profile
List Skeleton
Skeleton for list items and feeds.
Recent Activity
Table Skeleton
Skeleton for data tables and structured content.
User Management
| User | Role | Status | Actions | |
|---|---|---|---|---|
Dashboard Skeleton
Complex skeleton layout for dashboard interfaces.
Recent Activity
System Status
Skeleton Best Practices
Guidelines for effective skeleton implementation.
✅ Do
- • Match the layout of actual content
- • Use appropriate shapes and sizes
- • Maintain consistent spacing
- • Show during initial loading
- • Use subtle animations
- • Consider mobile responsiveness
- • Test with real content dimensions
❌ Don't
- • Use for error states (show error messages)
- • Make skeletons too different from content
- • Use overly bright or distracting colors
- • Show skeletons for too long
- • Ignore accessibility considerations
- • Use for quick state changes
- • Forget to handle edge cases
Loading States Summary
Current loading states across all examples.
Profile
Loading
Cards
Loading
List
Loading
Table
Loading
Dashboard
Loading
# Usage
# Attributes
| Name | Type | Default | Details |
|---|---|---|---|
| className | string | ' ' | You can customise by passing tailwind classes. |
| role | string | Optional | ARIA role for accessibility. |
| aria-busy | boolean | Optional | ARIA busy state. |
| aria-live | 'off' | 'polite' | 'assertive' | Optional | ARIA live region. |
# Tags