Skeleton — Cider UI

Selectors

.skeleton: Placeholder surface with shimmer animation. Set width / height / border-radius via utilities.

Text Lines

HTML

<div class="space-y-2 max-w-sm">
  <div class="skeleton h-4 w-3/4 rounded-sm"></div>
  <div class="skeleton h-4 w-full rounded-sm"></div>
  <div class="skeleton h-4 w-5/6 rounded-sm"></div>
</div>

Avatar + Text

HTML

<div class="flex items-center gap-3">
  <div class="skeleton size-10 rounded-full"></div>
  <div class="space-y-2 flex-1 max-w-xs">
    <div class="skeleton h-4 w-32 rounded-sm"></div>
    <div class="skeleton h-3 w-24 rounded-sm"></div>
  </div>
</div>

Card Placeholder

HTML

<div class="card max-w-sm">
  <div class="skeleton h-5 w-48 rounded-sm"></div>
  <div class="space-y-2 mt-2">
    <div class="skeleton h-3 w-full rounded-sm"></div>
    <div class="skeleton h-3 w-5/6 rounded-sm"></div>
    <div class="skeleton h-3 w-3/4 rounded-sm"></div>
  </div>
  <div class="skeleton mt-4 h-8 w-24 rounded"></div>
</div>

Image Placeholder

HTML

<div class="skeleton w-full max-w-xs h-40 rounded-[var(--radius-lg)]"></div>

Accessibility

Wrap skeletons in an element with aria-busy="true" so assistive tech announces a loading state.
Respect prefers-reduced-motion: the shimmer animation collapses to static via the global blanket rule.