Skeleton

A placeholder element that pulses to indicate content is loading. Compose multiple skeletons to match the shape of your real content.

Card-Like Layout

{/* Avatar + text lines */}
<div className="flex items-center gap-4">
  <Skeleton className="h-12 w-12 rounded-full" />
  <div className="space-y-2">
    <Skeleton className="h-4 w-48" />
    <Skeleton className="h-4 w-32" />
  </div>
</div>

{/* Content rectangle */}
<Skeleton className="h-32 w-full rounded-lg" />

API Reference

Prop	Type	Default	Description
`className`	`string`	—	CSS classes to control the size and shape of the skeleton placeholder. Use rounded-full for circles, h-* and w-* for dimensions.