Slate
View as Markdown Open in v0 Open in ChatGPT Open in Claude Open in Scira

Skeleton

Use to show a placeholder while content is loading.

Usage
example.blade.php 
<div class="flex items-center gap-4">
    <x-slate::skeleton class="size-10 rounded-full" />
    <div class="space-y-2">
        <x-slate::skeleton class="h-4 w-[250px]" />
        <x-slate::skeleton class="h-4 w-[200px]" />
    </div>
</div>

Card placeholder
example.blade.php 
<div class="flex flex-col gap-3 w-full max-w-sm">
    <x-slate::skeleton class="h-[125px] w-full rounded-xl" />
    <div class="space-y-2">
        <x-slate::skeleton class="h-4 w-full" />
        <x-slate::skeleton class="h-4 w-4/5" />
    </div>
</div>

API Reference
Prop Type Default Description
as string div Root HTML element

Size and shape come from class (for example size-10 rounded-full or h-4 w-full).

Last updated .