skeleton-rect, skeleton-circle, skeleton-text — loading shimmer.

Usage#

html
<div class="skeleton-rect h-32 rounded-lg"></div>

The classes#

ClassPurpose
skeleton-rectRectangle shimmer
skeleton-circleAvatar shimmer
skeleton-textLine shimmer

Compose with utilities#

html
<div class="flex gap-4 items-center">
  <div class="skeleton-circle h-12 w-12"></div>
  <div class="flex-1 space-y-2">
    <div class="skeleton-text h-3 w-3/4"></div>
    <div class="skeleton-text h-3 w-1/2"></div>
  </div>
</div>

Customization#

v1 components are frozen CSS — customize by overriding after the stylesheet, or by redefining the palette variables they consume.

Accessibility#

  • Add aria-busy="true" and a text alternative for screen readers
  • Keep shimmer motion subtle (motion-reduce: stop it)

components/index|Components hub · themes/index|Themes · recipes/index|Recipes