Skeleton

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

Examples

Properties

The Skeleton component does not have custom props. It is styled entirely using standard Tailwind utility classes (e.g., h-4, w-full, rounded-full) via the class attribute.

Usage

blade

<div class="flex items-center space-x-4">
    <x-plume::skeleton class="size-12 rounded-full" />
    <div class="space-y-2">
        <x-plume::skeleton class="h-4 w-[250px]" />
        <x-plume::skeleton class="h-4 w-[200px]" />
    </div>
</div>