Components

Skeleton

Use to show a placeholder while content is loading.

php artisan blatui:add skeleton

<div class="flex items-center gap-4">
    <x-ui.skeleton class="size-12 rounded-full" />
    <div class="flex flex-col gap-2">
        <x-ui.skeleton class="h-4 w-[250px]" />
        <x-ui.skeleton class="h-4 w-[200px]" />
    </div>
</div>

Card

<div class="flex w-full max-w-sm flex-col gap-3">
    <x-ui.skeleton class="h-40 w-full rounded-xl" />
    <div class="flex flex-col gap-2">
        <x-ui.skeleton class="h-4 w-full" />
        <x-ui.skeleton class="h-4 w-3/4" />
    </div>
</div>

List

<div class="flex w-full max-w-sm flex-col gap-4">
    @foreach (range(1, 3) as $i)
        <div class="flex items-center gap-4">
            <x-ui.skeleton class="size-10 rounded-full" />
            <div class="flex flex-1 flex-col gap-2">
                <x-ui.skeleton class="h-4 w-1/2" />
                <x-ui.skeleton class="h-3 w-3/4" />
            </div>
        </div>
    @endforeach
</div>

Table

{{-- A table loading state. --}}
<div class="w-full max-w-lg overflow-hidden rounded-md border">
    <div class="bg-muted/40 flex items-center gap-4 border-b px-4 py-3">
        <x-ui.skeleton class="h-4 w-24" />
        <x-ui.skeleton class="h-4 w-32" />
        <x-ui.skeleton class="ml-auto h-4 w-16" />
    </div>
    @foreach (range(1, 4) as $i)
        <div class="flex items-center gap-4 px-4 py-3 {{ $i < 4 ? 'border-b' : '' }}">
            <x-ui.skeleton class="size-8 shrink-0 rounded-full" />
            <x-ui.skeleton class="h-4 w-24" />
            <x-ui.skeleton class="h-4 w-32" />
            <x-ui.skeleton class="ml-auto h-4 w-16" />
        </div>
    @endforeach
</div>

API Reference

Props, slots and exposed methods for <x-ui.skeleton>.

Slots

Slot	Description
`default`	Skeleton renders an empty, aria-hidden placeholder block — it takes no content and no props. Set its size and shape with utility classes (e.g. class="h-4 w-[250px]" for a text line, class="size-12 rounded-full" for an avatar). Compose several to mirror the layout of the real content it stands in for.