Skeleton

Overview

Skeleton renders animated placeholder shapes that represent the layout of content before it loads. Unlike Spinner, Skeleton preserves the visual structure of the page and reduces layout shift when content appears.

Usage

<Skeleton width="200px" />
<Skeleton variant="circular" width="48px" height="48px" />
<Skeleton lines={3} />

Card Skeleton

<Card>
  <Card.Header>
    <Skeleton width="60%" height="24px" />
    <Skeleton width="80%" height="16px" />
  </Card.Header>
  <Card.Content>
    <Skeleton lines={3} />
  </Card.Content>
</Card>

Avatar + Text

<div className="flex items-center gap-3">
  <Skeleton variant="circular" width="40px" height="40px" />
  <div className="space-y-2">
    <Skeleton width="120px" height="16px" />
    <Skeleton width="80px" height="12px" />
  </div>
</div>

Accessibility

• Skeleton is decorative and hidden from screen readers with aria-hidden="true"
• Use aria-busy="true" on the container that will receive the loaded content
• Announce content when it arrives using aria-live="polite" on the parent

API Reference

AI Decision Guide

Use Skeleton when:

• Loading content with a predictable layout (cards, lists, profiles)
• You want to prevent layout shift as content loads
• The loading state should feel fast and intentional

Don't use Skeleton when:

• Duration is unknown and layout is unpredictable → use Spinner
• Progress is measurable → use Progress

Related Components