ISkeleton ​

A placeholder in the shape of the content that is coming. Match it to what will land, or the layout jumps when the real thing arrives.

<ISkeleton variant="text" :lines="3" />

Variants ​

text sizes itself to the current line height. rect is a block, and circle an avatar or icon.

<ISkeleton variant="text" :lines="2" />
<ISkeleton variant="rect" class="h-24 w-full max-w-md" />
<ISkeleton variant="circle" class="size-10" />

rect and circle take their size from class.

Composing a shape ​

Skeletons are plain boxes; build a shape out of several.

<div class="flex gap-3">
  <ISkeleton variant="circle" class="size-10 shrink-0" />
  <div class="flex flex-1 flex-col gap-2">
    <ISkeleton variant="rect" class="h-4 w-32" />
    <ISkeleton variant="text" :lines="2" />
  </div>
</div>

Announcing the wait ​

Every skeleton carries label as its accessible name, defaulting to Loading. Name the thing being waited for when several are on screen at once.

<ISkeleton :lines="3" label="Loading invoices" />

Props ​

ITable renders its own skeleton rows while loading its first page, then switches to a refresh bar once rows are on screen.