Skip to content

Overview

The <x-aura::skeleton> component renders an animated placeholder element used to indicate loading states. It provides a visual hint of the content structure before actual data appears, reducing perceived loading time and preventing layout shifts. The skeleton is hidden from assistive technologies with aria-hidden="true".

Basic Usage

<x-aura::skeleton class="h-4 w-48" />

Props

Prop Type Default Description
rounded string 'md' Border radius variant. Options: none, sm, md, lg, full.

The skeleton component relies on utility classes or inline styles for width and height rather than dedicated props. Pass Tailwind classes via the class attribute to control dimensions.

Variants / Examples

Text Lines Placeholder

<div class="space-y-3">
    <x-aura::skeleton class="h-4 w-3/4" />
    <x-aura::skeleton class="h-4 w-full" />
    <x-aura::skeleton class="h-4 w-5/6" />
    <x-aura::skeleton class="h-4 w-2/3" />
</div>

Avatar Placeholder

<x-aura::skeleton class="h-12 w-12" rounded="full" />

Card Placeholder

<div class="space-y-4 p-4 border rounded-lg">
    <div class="flex items-center gap-3">
        <x-aura::skeleton class="h-10 w-10" rounded="full" />
        <div class="space-y-2 flex-1">
            <x-aura::skeleton class="h-4 w-32" />
            <x-aura::skeleton class="h-3 w-24" />
        </div>
    </div>
    <x-aura::skeleton class="h-40 w-full" rounded="lg" />
    <div class="space-y-2">
        <x-aura::skeleton class="h-4 w-full" />
        <x-aura::skeleton class="h-4 w-4/5" />
    </div>
</div>

Table Row Placeholders

<div class="space-y-3">
    @for($i = 0; $i < 5; $i++)
        <div class="flex items-center gap-4">
            <x-aura::skeleton class="h-8 w-8" rounded="sm" />
            <x-aura::skeleton class="h-4 w-40" />
            <x-aura::skeleton class="h-4 w-24" />
            <x-aura::skeleton class="h-4 w-20" />
        </div>
    @endfor
</div>

Dashboard Stats Placeholder

<div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
    @for($i = 0; $i < 3; $i++)
        <div class="p-6 border rounded-lg space-y-3">
            <x-aura::skeleton class="h-3 w-24" />
            <x-aura::skeleton class="h-8 w-16" />
            <x-aura::skeleton class="h-3 w-20" />
        </div>
    @endfor
</div>

Conditional Loading with Livewire

<div>
    @if($loading)
        <div class="space-y-3">
            <x-aura::skeleton class="h-4 w-3/4" />
            <x-aura::skeleton class="h-4 w-full" />
            <x-aura::skeleton class="h-4 w-2/3" />
        </div>
    @else
        <p>{{ $content }}</p>
    @endif
</div>

Accessibility

  • The component sets aria-hidden="true" to ensure screen readers ignore the placeholder elements entirely.
  • When implementing loading states, provide an accessible loading announcement (e.g., aria-busy="true" on the parent container or a visually hidden <span> with loading text) so users relying on assistive technology are informed that content is loading.