Flux components

Skeleton

Placeholder shapes while content loads.

<div class="w-full max-w-sm space-y-3">
    <flux:skeleton class="aspect-video w-full rounded-lg" />
    <flux:skeleton class="h-4 w-3/4" />
    <flux:skeleton class="h-4 w-1/2" />
</div>

Group with shimmer

A group animates its children together instead of each on its own clock.

<flux:skeleton.group animate="shimmer" class="w-full max-w-sm space-y-3">
    <flux:skeleton class="aspect-video w-full rounded-lg" />
    <flux:skeleton class="h-4 w-3/4" />

    <div class="flex items-center gap-2">
        <flux:skeleton class="size-9 rounded-full" />
        <flux:skeleton class="h-4 w-24" />
    </div>
</flux:skeleton.group>

Lines

<flux:skeleton.group class="w-full max-w-sm space-y-2">
    <flux:skeleton.line />
    <flux:skeleton.line />
    <flux:skeleton.line class="w-2/3" />
</flux:skeleton.group>

Reference

flux:skeleton

Prop	Description
animate	Options: `shimmer`, `pulse`, `false`.

flux:skeleton.group

Animates its children in sync. Takes the same animate prop.

flux:skeleton.line

A single line of placeholder text.

Related