Skeleton
Use to show a placeholder while content is loading.
Basic Usage
Simple skeleton placeholders with different dimensions.
Shape Variants
Rectangular (default) and circular shapes for different content types.
Rectangular
Circular
Card Loading State
Skeleton placeholder for a card component.
List Loading State
Skeleton placeholders for list items.
Avatar Placeholders
Different sizes of circular skeletons for avatar loading states.
Small
Medium
Large
XL
Profile Card Loading
Complex loading state with mixed skeleton shapes.
Table Loading State
Skeleton placeholders for table rows and columns.
Form Loading State
Skeleton placeholders for form fields.
Image Gallery Loading
Skeleton placeholders for image grid layouts.
Custom Styling
Override styles with the Class parameter for different effects.
Best Practices
Guidelines for using skeleton loading states effectively.
✓ Match content dimensions: Skeleton should approximate the size of the actual content.
✓ Use appropriate shapes: Circular for avatars, rectangular for text and images.
✓ Maintain layout: Prevent layout shifts by using skeleton placeholders that match content structure.
✓ Progressive disclosure: Show skeletons only for slow-loading content (>300ms).
✓ Keep it simple: Avoid overly complex skeleton patterns that distract users.
API Reference
Component parameters and their types.
| Prop | Type | Default | Description |
|---|---|---|---|
| Shape | SkeletonShape | Rectangular | Shape variant. Options: Rectangular (rounded-md), Circular (rounded-full). |
| Class | string? | — | Additional CSS classes. Use Tailwind utilities for width, height, and spacing. |