Skeleton

A placeholder component to show while content is loading.

Default

Text Lines

Use multiple skeletons to simulate text content.

Text Lines

Avatar

Use radius="full" to create circular skeleton placeholders.

Avatar

    <div class="flex items-center gap-4">
  <.skeleton class="size-10" radius="full" />
  <div class="space-y-2">
    <.skeleton class="h-3.5 w-[120px]" />
    <.skeleton class="h-3 w-[80px]" />
  </div>
</div>
  

Card Layout

Combine skeletons to create placeholder layouts for complex components.

Card Layout

    <div class="p-4 rounded-lg border space-y-4">
  <.skeleton class="h-[150px] w-full" />
  <div class="space-y-2">
    <.skeleton class="h-5 w-[60%]" />
    <.skeleton class="h-3.5 w-full" />
    <.skeleton class="h-3.5 w-[80%]" />
  </div>
  <div class="flex gap-2">
    <.skeleton class="h-8 w-20" />
    <.skeleton class="h-8 w-20" />
  </div>
</div>
  

Radius Options

The radius prop controls the border radius of the skeleton.

Radius

none

full

    <.skeleton class="size-20" radius="none" />
<.skeleton class="size-20" radius="sm" />
<.skeleton class="size-20" radius="md" />
<.skeleton class="size-20" radius="lg" />
<.skeleton class="size-20" radius="full" />
  

List Example

A common pattern for loading list items.

List

    <div :for={_ <- 1..3} class="flex items-center gap-4">
  <.skeleton class="size-12" />
  <div class="flex-1 space-y-2">
    <.skeleton class="h-4 w-[40%]" />
    <.skeleton class="h-3 w-[70%]" />
  </div>
  <.skeleton class="h-7 w-[60px]" />
</div>
  