Components
pinion-ui

Theme

Tune

Lang

Skeleton

Content loading placeholder wrapping daisyUI skeleton class. shape (rect / circle / text), width, height, radius, animated via props. width/height are Tailwind class names (w-32, h-4, etc.).

Default: a one-line text-width placeholder

<x-skeleton />

<div class="animate-pulse bg-base-300 rounded w-full h-4" aria-hidden="true"></div>

shape — rect (default) / circle / text

<x-skeleton width="w-full" height="h-16" />
<x-skeleton shape="circle" />
<x-skeleton shape="text" :lines="3" />

<div class="animate-pulse bg-base-300 rounded w-full h-16" aria-hidden="true"></div>
<div class="animate-pulse bg-base-300 rounded-full w-12 h-12" aria-hidden="true"></div>
<div class="space-y-2 w-full" aria-hidden="true">
<div class="animate-pulse bg-base-300 rounded h-4 w-full"></div>
<div class="animate-pulse bg-base-300 rounded h-4 w-full"></div>
<div class="animate-pulse bg-base-300 rounded h-4 w-2/3"></div>
</div>

Real-world example: card placeholder

<div class="flex items-start gap-4">
    <x-skeleton shape="circle" width="w-14" height="h-14" />
    <div class="flex-1 space-y-2">
        <x-skeleton width="w-1/3" height="h-4" />
        <x-skeleton shape="text" :lines="3" />
    </div>
</div>

<div class="flex items-start gap-4">
<div class="animate-pulse bg-base-300 rounded-full w-14 h-14" aria-hidden="true"></div>
<div class="flex-1 space-y-2">
<div class="animate-pulse bg-base-300 rounded w-1/3 h-4" aria-hidden="true"></div>
<div class="space-y-2 w-full" aria-hidden="true">
<div class="animate-pulse bg-base-300 rounded h-4 w-full"></div>
<div class="animate-pulse bg-base-300 rounded h-4 w-full"></div>
<div class="animate-pulse bg-base-300 rounded h-4 w-2/3"></div>
</div>
</div>
</div>

text lines — 1 / 2 / 3 / 5

<x-skeleton shape="text" :lines="1" />
<x-skeleton shape="text" :lines="2" />
<x-skeleton shape="text" :lines="3" />
<x-skeleton shape="text" :lines="5" />

<div class="animate-pulse bg-base-300 rounded w-full h-4" aria-hidden="true"></div>
<div class="space-y-2 w-full" aria-hidden="true">
<div class="animate-pulse bg-base-300 rounded h-4 w-full"></div>
<div class="animate-pulse bg-base-300 rounded h-4 w-2/3"></div>
</div>
<div class="space-y-2 w-full" aria-hidden="true">
<div class="animate-pulse bg-base-300 rounded h-4 w-full"></div>
<div class="animate-pulse bg-base-300 rounded h-4 w-full"></div>
<div class="animate-pulse bg-base-300 rounded h-4 w-2/3"></div>
</div>
<div class="space-y-2 w-full" aria-hidden="true">
<div class="animate-pulse bg-base-300 rounded h-4 w-full"></div>
<div class="animate-pulse bg-base-300 rounded h-4 w-full"></div>
<div class="animate-pulse bg-base-300 rounded h-4 w-full"></div>
<div class="animate-pulse bg-base-300 rounded h-4 w-full"></div>
<div class="animate-pulse bg-base-300 rounded h-4 w-2/3"></div>
</div>

Rounded corners — default / sm / md / lg / xl / full

<x-skeleton width="w-full" height="h-10" radius="default" />
<x-skeleton width="w-full" height="h-10" radius="sm" />
<x-skeleton width="w-full" height="h-10" radius="md" />
<x-skeleton width="w-full" height="h-10" radius="lg" />
<x-skeleton width="w-full" height="h-10" radius="xl" />
<x-skeleton width="w-full" height="h-10" radius="full" />

<div class="animate-pulse bg-base-300 rounded w-full h-10" aria-hidden="true"></div>
<div class="animate-pulse bg-base-300 rounded-sm w-full h-10" aria-hidden="true"></div>
<div class="animate-pulse bg-base-300 rounded-md w-full h-10" aria-hidden="true"></div>
<div class="animate-pulse bg-base-300 rounded-lg w-full h-10" aria-hidden="true"></div>
<div class="animate-pulse bg-base-300 rounded-xl w-full h-10" aria-hidden="true"></div>
<div class="animate-pulse bg-base-300 rounded-full w-full h-10" aria-hidden="true"></div>

Size via Tailwind classes (raw px is not allowed)

<x-skeleton width="w-32" height="h-4" />
<x-skeleton width="w-1/2" height="h-8" />
<x-skeleton width="w-full" height="h-32" radius="lg" />
<x-skeleton width="w-24" height="h-24" radius="md" />

<div class="animate-pulse bg-base-300 rounded w-32 h-4" aria-hidden="true"></div>
<div class="animate-pulse bg-base-300 rounded w-1/2 h-8" aria-hidden="true"></div>
<div class="animate-pulse bg-base-300 rounded-lg w-full h-32" aria-hidden="true"></div>
<div class="animate-pulse bg-base-300 rounded-md w-24 h-24" aria-hidden="true"></div>

Static placeholder (no pulse) — animated=true (default) vs false

<div class="space-y-2">
    <x-skeleton width="w-2/3" height="h-4" />
    <x-skeleton width="w-full" height="h-4" />
    <x-skeleton width="w-1/2" height="h-4" />
</div>
<div class="space-y-2">
    <x-skeleton width="w-2/3" height="h-4" :animated="false" />
    <x-skeleton width="w-full" height="h-4" :animated="false" />
    <x-skeleton width="w-1/2" height="h-4" :animated="false" />
</div>

<div class="space-y-2">
<div class="animate-pulse bg-base-300 rounded w-2/3 h-4" aria-hidden="true"></div>
<div class="animate-pulse bg-base-300 rounded w-full h-4" aria-hidden="true"></div>
<div class="animate-pulse bg-base-300 rounded w-1/2 h-4" aria-hidden="true"></div>
</div>
<div class="space-y-2">
<div class="bg-base-300 rounded w-2/3 h-4" aria-hidden="true"></div>
<div class="bg-base-300 rounded w-full h-4" aria-hidden="true"></div>
<div class="bg-base-300 rounded w-1/2 h-4" aria-hidden="true"></div>
</div>