A flexible and customizable skeleton loading component for React applications.
npm install smart-skeleton- 🎨 Fully customizable dimensions
- 🌓 Dark mode support
- ⚡ Tailwind CSS integration
- 🔄 Smooth animation
- 📱 Responsive design
- 🎯 TypeScript support
import { SmartSkeleton } from 'smart-skeleton';
// Text skeleton
<SmartSkeleton width="100%" height={20} />
// Avatar skeleton
<SmartSkeleton width={48} height={48} rounded />
// Multiple line skeleton
<SmartSkeleton width="100%" height={20} count={3} gap={8} />
// Card skeleton
<div className="space-y-2">
<SmartSkeleton width={300} height={200} />
<SmartSkeleton width={200} height={20} />
<SmartSkeleton width={100} height={20} />
</div>| Prop | Type | Default | Description |
|---|---|---|---|
| width | string | number | '100%' | Width of the skeleton |
| height | string | number | '1rem' | Height of the skeleton |
| rounded | boolean | false | Whether to show rounded corners |
| animate | boolean | true | Whether to show animation |
| count | number | 1 | Number of skeleton items |
| direction | 'row' | 'column' | 'column' | Direction of multiple items |
| gap | string | number | '0.5rem' | Gap between multiple items |
| className | string | '' | Additional CSS classes |
MIT