Skeleton
Animated placeholder for loading content. Shows users that content is being loaded.
Text Skeleton
Default text skeleton
Multiple Lines
Text skeleton with multiple lines
Circular Skeleton
For avatars and circular images
Rectangular Skeleton
For images and cards
Card Loading Example
Skeleton used in a card layout
Without Animation
Static skeleton without shimmer effect
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'text' | 'circular' | 'rectangular' | 'text' | Shape variant of the skeleton |
width | string | number | undefined | Width of the skeleton (CSS value) |
height | string | number | undefined | Height of the skeleton (CSS value) |
lines | number | 1 | Number of text lines to show (only for text variant) |
animation | boolean | true | Whether to animate the skeleton |
check_circleWhen to use
- Use when loading content that has a predictable shape
- Match skeleton dimensions to actual content dimensions
- Use for initial page loads and lazy-loaded content
cancelWhen not to use
- Don't use for very short loading times (under 300ms)
- Don't use spinners and skeletons together for the same content
- Don't create complex skeleton layouts that don't match final content