Skeleton
Loading state placeholders that match KiteUI component shapes.
Basic Skeletons
Story Skeletons
Card Skeletons
Profile Header Skeleton
Usage
import {
Skeleton,
SkeletonAvatar,
SkeletonCard,
SkeletonProductCard,
SkeletonProfileHeader,
SkeletonPage
} from "@/components/profile"
// Basic skeleton
<Skeleton className="h-4 w-full" />
// Avatar
<SkeletonAvatar size="lg" />
// Full page loading
<SkeletonPage />Available Components
| Component | Description |
|---|---|
| Skeleton | Base skeleton with custom size |
| SkeletonAvatar | Circular avatar placeholder |
| SkeletonStories | Story circles row |
| SkeletonCard | Generic card |
| SkeletonProductCard | Product card shape |
| SkeletonSportsCard | Trading card shape |
| SkeletonProfileHeader | Profile header layout |
| SkeletonPage | Full page layout |