Skeleton

Placeholder block for content that hasn't arrived. It has no size of its own — you shape it with utilities.

Props

All other <div> attributes are forwarded.

Common patterns

<Skeleton className="h-4 w-32" />
<Skeleton className="size-10 rounded-full" />

// Mirror the shape of what's loading
<div className="space-y-2">
  <Skeleton className="h-3.5 w-2/3" />
  <Skeleton className="h-3.5 w-full" />
</div>

Notes

The component is aria-hidden, so screen readers skip it entirely. Announce loading state separately — usually aria-busy on the region that is filling in, or a live region that says what arrived once it has.

Skeletons work when they match the shape of the real content. A single grey box where a three-line paragraph will appear reads as a broken layout rather than as loading.

The pulse comes from Tailwind's animate-pulse, which respects the reduced motion media query if your stylesheet includes the usual guard — this site's does.