Skeleton

Purpose

A shimmering placeholder that occupies the shape of content while it loads, reducing layout shift and signalling progress.

Anatomy

A single <div> (data-slot="skeleton"). Size it with utility classes (h-*, w-*, rounded-*) to match the real content it stands in for.

Style

No variants — a pulsing token --muted block. Match the final content's dimensions and radius so the swap is seamless.

Behavior & functionality

Purely visual. Render skeletons while data is pending; replace with real content on load. Prefer a small number of representative skeletons over pixel-perfect clones of every element.

Accessibility

• Decorative — don't announce individual skeletons. Mark the loading region with aria-busy="true" (and optionally aria-live="polite") on the container, not on each skeleton.

Do / Don't

• ✅ Match the real element's height/width/radius to avoid layout shift.
• ❌ Don't leave skeletons on screen indefinitely — always resolve to content or an empty/error state.