Component

Skeleton

Animated shimmer placeholder for loading states. Matches the shape of the content it replaces.

Default

tsx

<Skeleton className="h-40 w-full rounded-xl" />
<Skeleton className="h-4 w-3/4" />
<Skeleton className="h-3 w-1/2" />

Photo card loading state

tsx

<div className="flex gap-3">
  <Skeleton className="h-48 flex-1 rounded-xl" />
  <Skeleton className="h-48 flex-1 rounded-xl" />
  <Skeleton className="h-48 flex-1 rounded-xl" />
</div>

Invisible (layout preservation)

The invisible prop hides the element but preserves its layout space — useful for skeleton screens where dimensions must match the loaded state exactly.

tsx

<Skeleton className="h-8 w-24" invisible />

Props

Prop	Type	Default	Description
invisible	boolean	false	Hides the skeleton (visibility: hidden) while preserving layout space.
className	string	—	Size and shape via Tailwind classes.