Skeleton Component

The Skeleton component creates smooth, animated loading states that enhance user experience while content loads. With four versatile variants and customizable lines, it adapts to various content layouts.

Key Features

• Multiple Variants: Four pre-built layouts for common use cases

• Customizable Lines: Adjustable number of lines for text content

• Smooth Animations: Built-in loading animations

• Responsive Design: Adapts to container width

Basic Usage

Image Skeleton

Perfect for image placeholders while content loads:

1
<Skeleton type="image" class="h-20" />

Text Skeleton

Simulate paragraph content with varying line widths:

1
<Skeleton type="text" class="h-20 max-w-lg" lines={6} />

Profile Layouts

Two variants for user cards and content previews:

Profile Type 1

1
<Skeleton type="profile" class="h-20" lines={2} />

Profile Type 2

1
<Skeleton type="profile-2" class="h-20 max-w-lg" lines={2} />

Props API

Best Practices

1. Content Matching

   • Match skeleton dimensions to actual content
   • Use appropriate variant for content type
   • Maintain consistent spacing
   • Consider mobile layouts

2. Performance

   • Use lazy loading when appropriate
   • Optimize animation performance
   • Consider reduced motion preferences
   • Clean up on content load

Common Applications