Loading placeholder for content.
| Name | Type | Default | Description |
|---|---|---|---|
| className | string | — | Custom dimensions and styling |
| Property | Token | CSS Variable | Description | |
|---|---|---|---|---|
| Background | color.muted | var(--muted) | Skeleton background |
Common skeleton shapes for different content types.
Line
Circle (avatar)
Rectangle (image)
<Skeleton className="h-4 w-full" /> <Skeleton className="h-12 w-12 rounded-full" /> <Skeleton className="h-32 w-full" />
Multiple lines to represent paragraph loading states.
<div className="space-y-2"> <Skeleton className="h-4 w-full" /> <Skeleton className="h-4 w-full" /> <Skeleton className="h-4 w-3/4" /> </div>
Skeleton layout for card components with image and text.
<div className="rounded-lg border p-4 space-y-4 max-w-sm">
<Skeleton className="h-40 w-full" />
<div className="space-y-2">
<Skeleton className="h-4 w-3/4" />
<Skeleton className="h-4 w-1/2" />
</div>
<Skeleton className="h-10 w-full" />
</div>Common pattern for user profile loading states.
<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-[200px]" />
<Skeleton className="h-4 w-[150px]" />
</div>
</div>Repeated skeleton items for list loading states.
<div className="space-y-4">
{[1, 2, 3].map((i) => (
<div key={i} className="flex items-center space-x-4">
<Skeleton className="h-10 w-10 rounded-full" />
<div className="space-y-2 flex-1">
<Skeleton className="h-4 w-3/4" />
<Skeleton className="h-3 w-1/2" />
</div>
</div>
))}
</div>