Skeleton
StablePlaceholder components to show while content is loading, featuring advanced shimmer animations.
Examples
Base Skeleton
tsx
<div className="flex items-center space-x-4">
<Skeleton className="h-12 w-12 rounded-full" />
<div className="space-y-2">
<Skeleton className="h-4 w-[250px]" />
<Skeleton className="h-4 w-[200px]" />
</div>
</div>Complex Placeholders
Use SkeletonCard and SkeletonText for rapid UI mocking.
tsx
<div className="grid grid-cols-2 gap-4">
<SkeletonCard variant="default" />
<SkeletonCard variant="neon" />
<SkeletonCard variant="glass" hasImage={false} />
</div>Animation Types
Shimmer (Default)
Pulse
None
tsx
<div className="space-y-4">
<SkeletonText animation="shimmer" lines={2} />
<SkeletonText animation="pulse" lines={2} />
<SkeletonText animation="none" lines={2} />
</div>API Reference
| Property | Description | Type | Default |
|---|---|---|---|
| variant | Visual style for the skeleton. | "default" | "neon" | "glass" | "default" |
| animation | Animation style. | "shimmer" | "pulse" | "none" | "shimmer" |
| lines | For SkeletonText: number of lines to render. | number | 3 |
| hasImage | For SkeletonCard: render image block. | boolean | true |