Skeleton

x-skeleton

A pulsing placeholder for content that is still loading. Size it with utility classes, render a circle, or stack several text lines.

php artisan components:add skeleton

Examples

Avatar & lines

A circular placeholder paired with stacked text lines.

<div class="flex w-full max-w-md items-center justify-center gap-4">
    <x-components.skeleton circle class="size-12 shrink-0" />
    <div class="flex-1">
        <x-components.skeleton :lines="3" />
    </div>
</div>

Props

Prop	Type	Default	Description
`lines`	text	`—`	Render this many stacked line placeholders (the last is shorter).
`circle`	boolean	`false`	Render a circular placeholder (for avatars/icons).