Skeleton · Panel

Basic Usage

<div class="flex">
  <div class="flex items-center space-x-4">
    <div class="mv-skeleton size-16 rounded-full"></div>
    <div class="space-y-2">
      <div class="mv-skeleton h-5 w-[225px]"></div>
      <div class="mv-skeleton h-4 w-[175px]"></div>
    </div>
  </div>
</div>

Card

<div class="mv-card w-full max-w-[460px]" aria-hidden="true">
  <div class="mv-card-header">
    <div class="space-y-2">
      <div class="mv-skeleton h-5 w-[180px] motion-reduce:animate-none"></div>
      <div class="mv-skeleton h-3 w-[120px] motion-reduce:animate-none"></div>
    </div>
  </div>
  <div class="mv-card-content space-y-3">
    <div class="mv-skeleton h-4 w-full motion-reduce:animate-none"></div>
    <div class="mv-skeleton h-4 w-[92%] motion-reduce:animate-none"></div>
    <div class="mv-skeleton h-4 w-[70%] motion-reduce:animate-none"></div>
  </div>
  <div class="mv-card-footer">
    <div
      class="mv-skeleton h-9 w-[120px] rounded-md motion-reduce:animate-none"
    ></div>
  </div>
</div>

List

<div class="w-full max-w-[520px] space-y-3" aria-hidden="true">
  <div
    class="flex items-center gap-3 rounded-lg border border-border border-dashed p-3"
  >
    <div
      class="mv-skeleton size-10 rounded-full motion-reduce:animate-none"
    ></div>
    <div class="grow space-y-2">
      <div class="mv-skeleton h-4 w-[40%] motion-reduce:animate-none"></div>
      <div class="mv-skeleton h-3 w-[72%] motion-reduce:animate-none"></div>
    </div>
    <div
      class="mv-skeleton h-8 w-[72px] rounded-md motion-reduce:animate-none"
    ></div>
  </div>
  <div
    class="flex items-center gap-3 rounded-lg border border-border border-dashed p-3"
  >
    <div
      class="mv-skeleton size-10 rounded-full motion-reduce:animate-none"
    ></div>
    <div class="grow space-y-2">
      <div class="mv-skeleton h-4 w-[40%] motion-reduce:animate-none"></div>
      <div class="mv-skeleton h-3 w-[72%] motion-reduce:animate-none"></div>
    </div>
    <div
      class="mv-skeleton h-8 w-[72px] rounded-md motion-reduce:animate-none"
    ></div>
  </div>
  <div
    class="flex items-center gap-3 rounded-lg border border-border border-dashed p-3"
  >
    <div
      class="mv-skeleton size-10 rounded-full motion-reduce:animate-none"
    ></div>
    <div class="grow space-y-2">
      <div class="mv-skeleton h-4 w-[40%] motion-reduce:animate-none"></div>
      <div class="mv-skeleton h-3 w-[72%] motion-reduce:animate-none"></div>
    </div>
    <div
      class="mv-skeleton h-8 w-[72px] rounded-md motion-reduce:animate-none"
    ></div>
  </div>
  <div
    class="flex items-center gap-3 rounded-lg border border-border border-dashed p-3"
  >
    <div
      class="mv-skeleton size-10 rounded-full motion-reduce:animate-none"
    ></div>
    <div class="grow space-y-2">
      <div class="mv-skeleton h-4 w-[40%] motion-reduce:animate-none"></div>
      <div class="mv-skeleton h-3 w-[72%] motion-reduce:animate-none"></div>
    </div>
    <div
      class="mv-skeleton h-8 w-[72px] rounded-md motion-reduce:animate-none"
    ></div>
  </div>
  <div
    class="flex items-center gap-3 rounded-lg border border-border border-dashed p-3"
  >
    <div
      class="mv-skeleton size-10 rounded-full motion-reduce:animate-none"
    ></div>
    <div class="grow space-y-2">
      <div class="mv-skeleton h-4 w-[40%] motion-reduce:animate-none"></div>
      <div class="mv-skeleton h-3 w-[72%] motion-reduce:animate-none"></div>
    </div>
    <div
      class="mv-skeleton h-8 w-[72px] rounded-md motion-reduce:animate-none"
    ></div>
  </div>
</div>

Table

<div
  class="w-full max-w-[760px] rounded-lg border border-border overflow-hidden"
  aria-hidden="true"
>
  <div class="grid grid-cols-12 gap-3 border-b border-border bg-accent/40 p-3">
    <div
      class="col-span-4 mv-skeleton h-3 w-20 motion-reduce:animate-none"
    ></div>
    <div
      class="col-span-3 mv-skeleton h-3 w-16 motion-reduce:animate-none"
    ></div>
    <div
      class="col-span-3 mv-skeleton h-3 w-16 motion-reduce:animate-none"
    ></div>
    <div
      class="col-span-2 mv-skeleton h-3 w-12 motion-reduce:animate-none"
    ></div>
  </div>
  <div
    class="grid grid-cols-12 gap-3 border-b border-border p-3 last:border-b-0"
  >
    <div class="col-span-4 flex items-center gap-2">
      <div
        class="mv-skeleton size-8 rounded-full motion-reduce:animate-none"
      ></div>
      <div class="mv-skeleton h-4 w-[140px] motion-reduce:animate-none"></div>
    </div>
    <div
      class="col-span-3 mv-skeleton h-4 w-[90px] motion-reduce:animate-none"
    ></div>
    <div
      class="col-span-3 mv-skeleton h-4 w-[100px] motion-reduce:animate-none"
    ></div>
    <div
      class="col-span-2 mv-skeleton h-7 w-[64px] rounded-md motion-reduce:animate-none"
    ></div>
  </div>
  <div
    class="grid grid-cols-12 gap-3 border-b border-border p-3 last:border-b-0"
  >
    <div class="col-span-4 flex items-center gap-2">
      <div
        class="mv-skeleton size-8 rounded-full motion-reduce:animate-none"
      ></div>
      <div class="mv-skeleton h-4 w-[140px] motion-reduce:animate-none"></div>
    </div>
    <div
      class="col-span-3 mv-skeleton h-4 w-[90px] motion-reduce:animate-none"
    ></div>
    <div
      class="col-span-3 mv-skeleton h-4 w-[100px] motion-reduce:animate-none"
    ></div>
    <div
      class="col-span-2 mv-skeleton h-7 w-[64px] rounded-md motion-reduce:animate-none"
    ></div>
  </div>
  <div
    class="grid grid-cols-12 gap-3 border-b border-border p-3 last:border-b-0"
  >
    <div class="col-span-4 flex items-center gap-2">
      <div
        class="mv-skeleton size-8 rounded-full motion-reduce:animate-none"
      ></div>
      <div class="mv-skeleton h-4 w-[140px] motion-reduce:animate-none"></div>
    </div>
    <div
      class="col-span-3 mv-skeleton h-4 w-[90px] motion-reduce:animate-none"
    ></div>
    <div
      class="col-span-3 mv-skeleton h-4 w-[100px] motion-reduce:animate-none"
    ></div>
    <div
      class="col-span-2 mv-skeleton h-7 w-[64px] rounded-md motion-reduce:animate-none"
    ></div>
  </div>
  <div
    class="grid grid-cols-12 gap-3 border-b border-border p-3 last:border-b-0"
  >
    <div class="col-span-4 flex items-center gap-2">
      <div
        class="mv-skeleton size-8 rounded-full motion-reduce:animate-none"
      ></div>
      <div class="mv-skeleton h-4 w-[140px] motion-reduce:animate-none"></div>
    </div>
    <div
      class="col-span-3 mv-skeleton h-4 w-[90px] motion-reduce:animate-none"
    ></div>
    <div
      class="col-span-3 mv-skeleton h-4 w-[100px] motion-reduce:animate-none"
    ></div>
    <div
      class="col-span-2 mv-skeleton h-7 w-[64px] rounded-md motion-reduce:animate-none"
    ></div>
  </div>
</div>

Paragraph

<div class="w-full max-w-[620px] space-y-3" aria-hidden="true">
  <div class="mv-skeleton h-6 w-[220px] motion-reduce:animate-none"></div>
  <div class="mv-skeleton h-4 w-full motion-reduce:animate-none"></div>
  <div class="mv-skeleton h-4 w-[98%] motion-reduce:animate-none"></div>
  <div class="mv-skeleton h-4 w-[91%] motion-reduce:animate-none"></div>
  <div class="mv-skeleton h-4 w-[83%] motion-reduce:animate-none"></div>
  <div class="mv-skeleton h-4 w-[70%] motion-reduce:animate-none"></div>
</div>

Avatar Row

<div class="flex flex-wrap items-center gap-4" aria-hidden="true">
  <div
    class="flex items-center gap-3 rounded-lg border border-border p-3 min-w-[220px]"
  >
    <div
      class="mv-skeleton size-12 rounded-full motion-reduce:animate-none"
    ></div>
    <div class="space-y-2">
      <div class="mv-skeleton h-4 w-[110px] motion-reduce:animate-none"></div>
      <div class="mv-skeleton h-3 w-[84px] motion-reduce:animate-none"></div>
    </div>
  </div>
  <div
    class="flex items-center gap-3 rounded-lg border border-border p-3 min-w-[220px]"
  >
    <div
      class="mv-skeleton size-12 rounded-full motion-reduce:animate-none"
    ></div>
    <div class="space-y-2">
      <div class="mv-skeleton h-4 w-[110px] motion-reduce:animate-none"></div>
      <div class="mv-skeleton h-3 w-[84px] motion-reduce:animate-none"></div>
    </div>
  </div>
  <div
    class="flex items-center gap-3 rounded-lg border border-border p-3 min-w-[220px]"
  >
    <div
      class="mv-skeleton size-12 rounded-full motion-reduce:animate-none"
    ></div>
    <div class="space-y-2">
      <div class="mv-skeleton h-4 w-[110px] motion-reduce:animate-none"></div>
      <div class="mv-skeleton h-3 w-[84px] motion-reduce:animate-none"></div>
    </div>
  </div>
  <div
    class="flex items-center gap-3 rounded-lg border border-border p-3 min-w-[220px]"
  >
    <div
      class="mv-skeleton size-12 rounded-full motion-reduce:animate-none"
    ></div>
    <div class="space-y-2">
      <div class="mv-skeleton h-4 w-[110px] motion-reduce:animate-none"></div>
      <div class="mv-skeleton h-3 w-[84px] motion-reduce:animate-none"></div>
    </div>
  </div>
</div>

Gallery

<div
  class="grid grid-cols-2 md:grid-cols-3 gap-4 w-full max-w-[760px]"
  aria-hidden="true"
>
  <div class="space-y-2">
    <div
      class="mv-skeleton aspect-square w-full rounded-lg motion-reduce:animate-none"
    ></div>
    <div class="mv-skeleton h-4 w-[72%] motion-reduce:animate-none"></div>
    <div class="mv-skeleton h-3 w-[46%] motion-reduce:animate-none"></div>
  </div>
  <div class="space-y-2">
    <div
      class="mv-skeleton aspect-square w-full rounded-lg motion-reduce:animate-none"
    ></div>
    <div class="mv-skeleton h-4 w-[72%] motion-reduce:animate-none"></div>
    <div class="mv-skeleton h-3 w-[46%] motion-reduce:animate-none"></div>
  </div>
  <div class="space-y-2">
    <div
      class="mv-skeleton aspect-square w-full rounded-lg motion-reduce:animate-none"
    ></div>
    <div class="mv-skeleton h-4 w-[72%] motion-reduce:animate-none"></div>
    <div class="mv-skeleton h-3 w-[46%] motion-reduce:animate-none"></div>
  </div>
  <div class="space-y-2">
    <div
      class="mv-skeleton aspect-square w-full rounded-lg motion-reduce:animate-none"
    ></div>
    <div class="mv-skeleton h-4 w-[72%] motion-reduce:animate-none"></div>
    <div class="mv-skeleton h-3 w-[46%] motion-reduce:animate-none"></div>
  </div>
  <div class="space-y-2">
    <div
      class="mv-skeleton aspect-square w-full rounded-lg motion-reduce:animate-none"
    ></div>
    <div class="mv-skeleton h-4 w-[72%] motion-reduce:animate-none"></div>
    <div class="mv-skeleton h-3 w-[46%] motion-reduce:animate-none"></div>
  </div>
  <div class="space-y-2">
    <div
      class="mv-skeleton aspect-square w-full rounded-lg motion-reduce:animate-none"
    ></div>
    <div class="mv-skeleton h-4 w-[72%] motion-reduce:animate-none"></div>
    <div class="mv-skeleton h-3 w-[46%] motion-reduce:animate-none"></div>
  </div>
</div>

Profile

<div class="mv-card w-full max-w-[560px]" aria-hidden="true">
  <div class="mv-card-content space-y-4">
    <div class="flex items-center gap-4">
      <div
        class="mv-skeleton size-16 rounded-full motion-reduce:animate-none"
      ></div>
      <div class="space-y-2">
        <div class="mv-skeleton h-5 w-[180px] motion-reduce:animate-none"></div>
        <div class="mv-skeleton h-4 w-[220px] motion-reduce:animate-none"></div>
      </div>
    </div>
    <div class="grid grid-cols-2 gap-3">
      <div class="mv-skeleton h-20 rounded-lg motion-reduce:animate-none"></div>
      <div class="mv-skeleton h-20 rounded-lg motion-reduce:animate-none"></div>
    </div>
    <div class="space-y-2">
      <div class="mv-skeleton h-4 w-full motion-reduce:animate-none"></div>
      <div class="mv-skeleton h-4 w-[90%] motion-reduce:animate-none"></div>
    </div>
  </div>
</div>

With Content

Demonstrates a realistic skeleton-to-content swap pattern.

<div class="mv-card w-full max-w-[620px]">
  <span class="sr-only" role="status" aria-live="polite">Loading activity feed</span>
  <div class="mv-card-header" aria-hidden="true">
    <div class="space-y-2">
      <div class="mv-skeleton h-5 w-[190px] motion-reduce:animate-none"></div>
      <div class="mv-skeleton h-3 w-[140px] motion-reduce:animate-none"></div>
    </div>
  </div>
  <div class="mv-card-content space-y-3" aria-hidden="true">
    <div class="flex items-center justify-between border border-border rounded-lg p-3">
      <div class="space-y-2 grow">
        <div class="mv-skeleton h-4 w-[68%] motion-reduce:animate-none"></div>
        <div class="mv-skeleton h-3 w-[44%] motion-reduce:animate-none"></div>
      </div>
      <div class="mv-skeleton h-8 w-[72px] rounded-md motion-reduce:animate-none"></div>
    </div>
    <div class="flex items-center justify-between border border-border rounded-lg p-3">
      <div class="space-y-2 grow">
        <div class="mv-skeleton h-4 w-[68%] motion-reduce:animate-none"></div>
        <div class="mv-skeleton h-3 w-[44%] motion-reduce:animate-none"></div>
      </div>
      <div class="mv-skeleton h-8 w-[72px] rounded-md motion-reduce:animate-none"></div>
    </div>
    <div class="flex items-center justify-between border border-border rounded-lg p-3">
      <div class="space-y-2 grow">
        <div class="mv-skeleton h-4 w-[68%] motion-reduce:animate-none"></div>
        <div class="mv-skeleton h-3 w-[44%] motion-reduce:animate-none"></div>
      </div>
      <div class="mv-skeleton h-8 w-[72px] rounded-md motion-reduce:animate-none"></div>
    </div>
  </div>
</div>

Media Object

<div class="space-y-4 w-full max-w-[700px]" aria-hidden="true">
  <div class="flex gap-4 rounded-lg border border-border p-3">
    <div
      class="mv-skeleton h-24 w-36 rounded-md shrink-0 motion-reduce:animate-none"
    ></div>
    <div class="space-y-2 grow">
      <div class="mv-skeleton h-5 w-[50%] motion-reduce:animate-none"></div>
      <div class="mv-skeleton h-4 w-[95%] motion-reduce:animate-none"></div>
      <div class="mv-skeleton h-4 w-[86%] motion-reduce:animate-none"></div>
      <div class="mv-skeleton h-4 w-[65%] motion-reduce:animate-none"></div>
    </div>
  </div>
  <div class="flex gap-4 rounded-lg border border-border p-3">
    <div
      class="mv-skeleton h-24 w-36 rounded-md shrink-0 motion-reduce:animate-none"
    ></div>
    <div class="space-y-2 grow">
      <div class="mv-skeleton h-5 w-[50%] motion-reduce:animate-none"></div>
      <div class="mv-skeleton h-4 w-[95%] motion-reduce:animate-none"></div>
      <div class="mv-skeleton h-4 w-[86%] motion-reduce:animate-none"></div>
      <div class="mv-skeleton h-4 w-[65%] motion-reduce:animate-none"></div>
    </div>
  </div>
  <div class="flex gap-4 rounded-lg border border-border p-3">
    <div
      class="mv-skeleton h-24 w-36 rounded-md shrink-0 motion-reduce:animate-none"
    ></div>
    <div class="space-y-2 grow">
      <div class="mv-skeleton h-5 w-[50%] motion-reduce:animate-none"></div>
      <div class="mv-skeleton h-4 w-[95%] motion-reduce:animate-none"></div>
      <div class="mv-skeleton h-4 w-[86%] motion-reduce:animate-none"></div>
      <div class="mv-skeleton h-4 w-[65%] motion-reduce:animate-none"></div>
    </div>
  </div>
</div>

Stats KPI

<div
  class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3 w-full max-w-[900px]"
  aria-hidden="true"
>
  <div class="mv-card">
    <div class="mv-card-content space-y-3">
      <div class="mv-skeleton h-4 w-[90px] motion-reduce:animate-none"></div>
      <div class="mv-skeleton h-8 w-[120px] motion-reduce:animate-none"></div>
      <div class="mv-skeleton h-3 w-[72px] motion-reduce:animate-none"></div>
    </div>
  </div>
  <div class="mv-card">
    <div class="mv-card-content space-y-3">
      <div class="mv-skeleton h-4 w-[90px] motion-reduce:animate-none"></div>
      <div class="mv-skeleton h-8 w-[120px] motion-reduce:animate-none"></div>
      <div class="mv-skeleton h-3 w-[72px] motion-reduce:animate-none"></div>
    </div>
  </div>
  <div class="mv-card">
    <div class="mv-card-content space-y-3">
      <div class="mv-skeleton h-4 w-[90px] motion-reduce:animate-none"></div>
      <div class="mv-skeleton h-8 w-[120px] motion-reduce:animate-none"></div>
      <div class="mv-skeleton h-3 w-[72px] motion-reduce:animate-none"></div>
    </div>
  </div>
  <div class="mv-card">
    <div class="mv-card-content space-y-3">
      <div class="mv-skeleton h-4 w-[90px] motion-reduce:animate-none"></div>
      <div class="mv-skeleton h-8 w-[120px] motion-reduce:animate-none"></div>
      <div class="mv-skeleton h-3 w-[72px] motion-reduce:animate-none"></div>
    </div>
  </div>
</div>

Comment Thread

<div class="space-y-4 w-full max-w-[700px]" aria-hidden="true">
  <div class="flex gap-3">
    <div
      class="mv-skeleton size-10 rounded-full shrink-0 motion-reduce:animate-none"
    ></div>
    <div class="grow space-y-2">
      <div class="flex items-center gap-2">
        <div class="mv-skeleton h-4 w-[120px] motion-reduce:animate-none"></div>
        <div class="mv-skeleton h-3 w-[70px] motion-reduce:animate-none"></div>
      </div>
      <div class="mv-skeleton h-4 w-[92%] motion-reduce:animate-none"></div>
      <div class="mv-skeleton h-4 w-[76%] motion-reduce:animate-none"></div>
    </div>
  </div>
  <div class="flex gap-3">
    <div
      class="mv-skeleton size-10 rounded-full shrink-0 motion-reduce:animate-none"
    ></div>
    <div class="grow space-y-2">
      <div class="flex items-center gap-2">
        <div class="mv-skeleton h-4 w-[120px] motion-reduce:animate-none"></div>
        <div class="mv-skeleton h-3 w-[70px] motion-reduce:animate-none"></div>
      </div>
      <div class="mv-skeleton h-4 w-[92%] motion-reduce:animate-none"></div>
      <div class="mv-skeleton h-4 w-[76%] motion-reduce:animate-none"></div>
    </div>
  </div>
  <div class="flex gap-3">
    <div
      class="mv-skeleton size-10 rounded-full shrink-0 motion-reduce:animate-none"
    ></div>
    <div class="grow space-y-2">
      <div class="flex items-center gap-2">
        <div class="mv-skeleton h-4 w-[120px] motion-reduce:animate-none"></div>
        <div class="mv-skeleton h-3 w-[70px] motion-reduce:animate-none"></div>
      </div>
      <div class="mv-skeleton h-4 w-[92%] motion-reduce:animate-none"></div>
      <div class="mv-skeleton h-4 w-[76%] motion-reduce:animate-none"></div>
    </div>
  </div>
  <div class="flex gap-3">
    <div
      class="mv-skeleton size-10 rounded-full shrink-0 motion-reduce:animate-none"
    ></div>
    <div class="grow space-y-2">
      <div class="flex items-center gap-2">
        <div class="mv-skeleton h-4 w-[120px] motion-reduce:animate-none"></div>
        <div class="mv-skeleton h-3 w-[70px] motion-reduce:animate-none"></div>
      </div>
      <div class="mv-skeleton h-4 w-[92%] motion-reduce:animate-none"></div>
      <div class="mv-skeleton h-4 w-[76%] motion-reduce:animate-none"></div>
    </div>
  </div>
</div>

Form Section

Pendiente de documentar.

<div class="mv-card w-full max-w-[620px]" aria-hidden="true">
  <div class="mv-card-header">
    <div class="mv-skeleton h-5 w-[170px] motion-reduce:animate-none"></div>
  </div>
  <div class="mv-card-content space-y-4">
    <div class="space-y-2">
      <div class="mv-skeleton h-3 w-[110px] motion-reduce:animate-none"></div>
      <div
        class="mv-skeleton h-10 w-full rounded-md motion-reduce:animate-none"
      ></div>
    </div>
    <div class="space-y-2">
      <div class="mv-skeleton h-3 w-[110px] motion-reduce:animate-none"></div>
      <div
        class="mv-skeleton h-10 w-full rounded-md motion-reduce:animate-none"
      ></div>
    </div>
    <div class="space-y-2">
      <div class="mv-skeleton h-3 w-[110px] motion-reduce:animate-none"></div>
      <div
        class="mv-skeleton h-10 w-full rounded-md motion-reduce:animate-none"
      ></div>
    </div>
    <div class="flex gap-2 justify-end">
      <div
        class="mv-skeleton h-9 w-[90px] rounded-md motion-reduce:animate-none"
      ></div>
      <div
        class="mv-skeleton h-9 w-[110px] rounded-md motion-reduce:animate-none"
      ></div>
    </div>
  </div>
</div>