Text Lines
Simulate loading text content with varying widths.
Card Skeleton
Compose multiple skeletons to match a card layout.
Avatar with Text
Common pattern for user profile loading states.
Table Rows
Skeleton rows for tabular data.
Props
| Prop | Type | Description |
|---|---|---|
| className | string | Additional classes for sizing and shape. |
| ...rest | HTMLDivElement attrs | All standard div attributes (style, role, aria-*, etc.). |
Usage
{/* Text placeholder */}
<Skeleton className="h-5 w-[80%]" />
{/* Card skeleton */}
<div className="border-2 p-4 flex flex-col gap-3">
<Skeleton className="h-40 w-full" />
<Skeleton className="h-5 w-[70%]" />
<Skeleton className="h-4 w-[90%]" />
</div>
{/* Avatar + text */}
<div className="flex gap-4 items-center">
<Skeleton className="h-12 w-12" />
<div className="flex flex-col gap-2 flex-1">
<Skeleton className="h-4 w-[40%]" />
<Skeleton className="h-3 w-[70%]" />
</div>
</div>