Skeleton

Skeleton displays a placeholder with an animated shimmer to indicate loading content.

<div class="skeleton h-16 w-full"></div>

Usage

Apply the skeleton class to any element. The element needs dimensions (height/width) to be visible.

<div class="skeleton h-16 w-full rounded"></div>

The skeleton automatically:

• Shows an animated gradient wave effect
• Respects prefers-reduced-motion by hiding the animation
• Uses theme-aware colors that work in light and dark modes

Text placeholder

Match skeleton height to the text size being replaced. Use gap-8 for body text rows.

<div class="flex flex-col gap-8">
  <div class="skeleton h-24 w-1/2"></div>
  <div class="skeleton h-16 w-full"></div>
  <div class="skeleton h-16 w-full"></div>
  <div class="skeleton h-16 w-64"></div>
</div>

Card placeholder

Combine multiple skeletons to represent complex layouts.

<div class="flex gap-16">
  <div class="skeleton h-64 w-64"></div>
  <div class="flex flex-col gap-8 flex-grow">
    <div class="skeleton h-24 w-1/2"></div>
    <div class="skeleton h-16 w-full"></div>
    <div class="skeleton h-16 w-full"></div>
  </div>
</div>

Accessibility

Skeletons are visual-only indicators. For accessible loading states:

• Add aria-busy="true" to the container being loaded
• Use aria-label="Loading content" on skeleton regions
• Announce completion with aria-live="polite" regions

<div aria-busy="true" aria-label="Loading content">
  <div class="skeleton h-16 w-full rounded"></div>
</div>

See the full accessibility requirements in the skeleton accessibility documentation.

CSS reference

Class	Description
skeleton	Applies skeleton styling with animated shimmer

The skeleton uses CSS containment (contain: strict) for performance. Set explicit dimensions using utility classes like h-16, w-full, etc.