Phara UI v2.x
Login

Skeleton

A composable loading placeholder. Control shape and size with Tailwind classes — the component provides only the animation.

Basic

Pass any Tailwind size, rounded, and spacing classes directly to shape the placeholder.

Blade 
{{-- Text lines --}}
<x-ui::skeleton class="h-4 w-full" />
<x-ui::skeleton class="h-4 w-5/6" />
<x-ui::skeleton class="h-4 w-4/6" />

{{-- Circle (avatar) --}}
<x-ui::skeleton class="size-10 rounded-full" />

{{-- Square thumbnail --}}
<x-ui::skeleton class="size-12 rounded-xl" />

{{-- Button --}}
<x-ui::skeleton class="h-9 w-28 rounded-xl" />

{{-- Image block --}}
<x-ui::skeleton class="h-48 w-full rounded-2xl" />
Pulse vs Shimmer

pulse (default) fades in and out. shimmer sweeps a highlight across the element — more polished for content-heavy pages.

Pulse

Shimmer

Blade 
{{-- Pulse (default) --}}
<x-ui::skeleton class="h-4 w-full" />
<x-ui::skeleton class="h-4 w-5/6" />

{{-- Shimmer --}}
<x-ui::skeleton variant="shimmer" class="h-4 w-full" />
<x-ui::skeleton variant="shimmer" class="h-4 w-5/6" />
Profile Pattern

Compose a profile row with a circle avatar and stacked text lines.

Blade 
{{-- Compact profile row --}}
<div class="flex items-center gap-3">
    <x-ui::skeleton class="size-10 rounded-full shrink-0" />
    <div class="flex-1 space-y-2">
        <x-ui::skeleton class="h-4 w-32" />
        <x-ui::skeleton class="h-3 w-24" />
    </div>
</div>

{{-- Large profile header --}}
<div class="flex items-center gap-4">
    <x-ui::skeleton class="size-16 rounded-full shrink-0" />
    <div class="space-y-2">
        <x-ui::skeleton class="h-5 w-40" />
        <x-ui::skeleton class="h-4 w-28" />
        <x-ui::skeleton class="h-3 w-20" />
    </div>
</div>
Card Pattern

A common content card skeleton with an image area, title, body lines, and an action row.

Blade 
<div class="rounded-2xl border border-gray-200 dark:border-zinc-700 overflow-hidden">
    <x-ui::skeleton class="h-48 w-full rounded-none" />
    <div class="p-5 space-y-3">
        <x-ui::skeleton class="h-5 w-3/4" />
        <div class="space-y-2">
            <x-ui::skeleton class="h-4 w-full" />
            <x-ui::skeleton class="h-4 w-full" />
            <x-ui::skeleton class="h-4 w-2/3" />
        </div>
        <div class="flex items-center justify-between pt-1">
            <div class="flex items-center gap-2">
                <x-ui::skeleton class="size-7 rounded-full" />
                <x-ui::skeleton class="h-3 w-20" />
            </div>
            <x-ui::skeleton class="h-8 w-20 rounded-xl" />
        </div>
    </div>
</div>
Article Pattern

A blog post or detail page skeleton with a headline, byline, and body paragraphs.

Blade 
<div class="space-y-6">
    {{-- Headline --}}
    <div class="space-y-2">
        <x-ui::skeleton class="h-8 w-4/5" />
        <x-ui::skeleton class="h-8 w-3/5" />
    </div>

    {{-- Byline --}}
    <div class="flex items-center gap-3">
        <x-ui::skeleton class="size-9 rounded-full" />
        <div class="space-y-1.5">
            <x-ui::skeleton class="h-3.5 w-28" />
            <x-ui::skeleton class="h-3 w-20" />
        </div>
    </div>

    {{-- Cover image --}}
    <x-ui::skeleton class="h-64 w-full rounded-2xl" />

    {{-- Body paragraphs --}}
    <div class="space-y-2">
        <x-ui::skeleton class="h-4 w-full" />
        <x-ui::skeleton class="h-4 w-full" />
        <x-ui::skeleton class="h-4 w-11/12" />
        <x-ui::skeleton class="h-4 w-full" />
        <x-ui::skeleton class="h-4 w-9/12" />
    </div>
</div>
Table Pattern

Simulate a data table with header labels and alternating row content.

Blade 
<div class="space-y-3">
    {{-- Header --}}
    <div class="grid grid-cols-4 gap-4 px-1">
        <x-ui::skeleton class="h-3 w-3/4" />
        <x-ui::skeleton class="h-3 w-1/2" />
        <x-ui::skeleton class="h-3 w-2/3" />
        <x-ui::skeleton class="h-3 w-1/3" />
    </div>

    <x-ui::separator />

    {{-- Rows --}}
    @foreach (range(1, 5) as $row)
        <div class="grid grid-cols-4 items-center gap-4">
            <div class="flex items-center gap-2">
                <x-ui::skeleton class="size-7 rounded-full shrink-0" />
                <x-ui::skeleton class="h-4 flex-1" />
            </div>
            <x-ui::skeleton class="h-4 w-3/4" />
            <x-ui::skeleton class="h-5 w-16 rounded-full" />
            <x-ui::skeleton class="h-4 w-2/3" />
        </div>
    @endforeach
</div>
Form Pattern

Placeholder layout for a form while its data or options are loading.

Blade 
<div class="space-y-5">
    {{-- Field --}}
    @foreach (range(1, 3) as $field)
        <div class="space-y-1.5">
            <x-ui::skeleton class="h-3.5 w-24" />
            <x-ui::skeleton class="h-10 w-full rounded-xl" />
        </div>
    @endforeach

    {{-- Textarea --}}
    <div class="space-y-1.5">
        <x-ui::skeleton class="h-3.5 w-20" />
        <x-ui::skeleton class="h-24 w-full rounded-xl" />
    </div>

    {{-- Actions --}}
    <div class="flex gap-3 pt-2">
        <x-ui::skeleton class="h-10 w-28 rounded-xl" />
        <x-ui::skeleton class="h-10 w-20 rounded-xl" />
    </div>
</div>
Dashboard Pattern

Stat cards and a chart area — a realistic loading state for a metrics dashboard using shimmer.

Blade 
<div class="space-y-6">
    {{-- Stat cards --}}
    <div class="grid grid-cols-2 sm:grid-cols-4 gap-4">
        @foreach (range(1, 4) as $card)
            <div class="rounded-xl border border-gray-200 dark:border-zinc-700 p-4 space-y-3">
                <x-ui::skeleton variant="shimmer" class="h-3 w-3/4" />
                <x-ui::skeleton variant="shimmer" class="h-7 w-1/2" />
                <x-ui::skeleton variant="shimmer" class="h-3 w-2/3" />
            </div>
        @endforeach
    </div>

    {{-- Chart area --}}
    <div class="rounded-xl border border-gray-200 dark:border-zinc-700 p-5 space-y-4">
        <div class="flex items-center justify-between">
            <x-ui::skeleton variant="shimmer" class="h-5 w-32" />
            <x-ui::skeleton variant="shimmer" class="h-8 w-24 rounded-xl" />
        </div>
        <x-ui::skeleton variant="shimmer" class="h-52 w-full rounded-xl" />
    </div>
</div>