Loading shimmer states for every shape.

Usage#

html
<div class="skeleton-rect h-32 rounded-xl"></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#

Every component is built from theme tokens (colors, blur radii, shadows). Redefine tokens in your config and the whole family restyles. For structural changes, copy the rules into your own layer and edit freely.

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