Skeleton

Apply the skeleton class to an element with explicit dimensions so its loading placeholder is visible.

Show codeHide code

<div class="skeleton h-16 w-full"></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.

Card placeholder

Combine multiple skeletons to represent complex layouts.

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 shape-default"></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.