Skeleton

Use to display a placeholder preview of your content before the data gets loaded to reduce cognitive load.

Examples

Shapes

Circle (circle)

Rectangle (rect - default)

Text (text)

blade

<div class="flex flex-wrap items-end gap-12">
    <div class="space-y-2">
        <p class="text-sm font-medium text-foreground/80 dark:text-background-200">Circle (circle)
        </p>
        <x-plume::skeleton shape="circle" class="size-12" />
    </div>
    <div class="space-y-2">
        <p class="text-sm font-medium text-foreground/80 dark:text-background-200">Rectangle (rect -
            default)</p>
        <x-plume::skeleton shape="rect" class="h-12 w-24" />
    </div>
    <div class="space-y-2">
        <p class="text-sm font-medium text-foreground/80 dark:text-background-200">Text (text)</p>
        <div class="w-[300px] space-y-2">
            <x-plume::skeleton shape="text" />
            <x-plume::skeleton shape="text" class="w-3/4" />
        </div>
    </div>
</div>

Animations

Pulse (default)

Wave (shimmer)

None

blade

<div class="flex flex-wrap items-end gap-12">
    <div class="space-y-2">
        <p class="text-sm font-medium text-foreground/80 dark:text-background-200">Pulse (default)
        </p>
        <x-plume::skeleton animation="pulse" class="h-12 w-24" />
    </div>
    <div class="space-y-2">
        <p class="text-sm font-medium text-foreground/80 dark:text-background-200">Wave (shimmer)
        </p>
        <x-plume::skeleton animation="wave" class="h-12 w-24" />
    </div>
    <div class="space-y-2">
        <p class="text-sm font-medium text-foreground/80 dark:text-background-200">None</p>
        <x-plume::skeleton animation="none" class="h-12 w-24" />
    </div>
</div>

With Content

With Icon

With Text

blade

<div class="flex flex-wrap items-end gap-12">
    <div class="space-y-2">
        <p class="text-sm font-medium text-foreground/80 dark:text-background-200">With Icon</p>
        <x-plume::skeleton class="size-12" shape="circle" animation="wave">
            <x-plume::icon i="icon-[fluent--image-24-regular]" class="size-6" />
        </x-plume::skeleton>
    </div>
    <div class="space-y-2">
        <p class="text-sm font-medium text-foreground/80 dark:text-background-200">With Text</p>
        <x-plume::skeleton class="h-12 w-32" animation="pulse">
            <span class="text-xs font-bold uppercase tracking-tighter">Loading</span>
        </x-plume::skeleton>
    </div>
</div>

Prop	Type	Default	Description
shape	string	'rect'	The shape of the skeleton: 'rect', 'circle', 'text'.
animation	string	'pulse'	The animation style: 'pulse', 'wave', 'none'.

Usage

blade

<!-- Basic circle skeleton with wave animation -->
                <x-plume::skeleton shape="circle" animation="wave" class="size-12" />

                <!-- Text skeleton (width defaults to full) -->
                <x-plume::skeleton shape="text" class="w-3/4" />

                <!-- Skeleton with internal content -->
                <x-plume::skeleton class="size-12" shape="circle">
                <x-plume::icon i="icon-[fluent--image-24-regular]" class="size-6" />
                </x-plume::skeleton>