skeleton

Placeholder shown while content loads.

<div class="flex w-full max-w-sm items-center gap-4">
    <x-ui.skeleton class="size-12 rounded-full" />
    <div class="flex-1 space-y-2">
        <x-ui.skeleton class="h-4 w-full" />
        <x-ui.skeleton class="h-4 w-2/3" />
    </div>
</div>

Installation

php artisan ui:add skeleton

1. Install dependencies

composer: gehrisandro/tailwind-merge-laravel

2. Copy the source into resources/views/components/ui/

resources/views/components/ui/skeleton.blade.php

@props([])

@php
    $classes = \TailwindMerge\Laravel\Facades\TailwindMerge::merge(
        'animate-pulse rounded-md bg-accent',
        $attributes->get('class'),
    );
@endphp

<div {{ $attributes->except('class')->merge(['class' => $classes]) }}></div>

Usage

<x-ui.skeleton class="h-4 w-32" />

Size it with utility classes, e.g. <x-ui.skeleton class="h-4 w-32" />.

Props

Every prop with its default. Pass any of them as attributes, using : to bind a PHP value.

@props([])