1. Components
  2. skeleton

Skeleton

Animated placeholder used while content is loading.

Demo

<div class="w-full max-w-xl flex items-start gap-x-4">
    <x-ui.skeleton class="size-14"/>
    <div class="flex-1 space-y-3">
        <x-ui.skeleton class="w-4/5 h-7"/>
        <x-ui.skeleton class="w-9/12 h-4"/>
         <x-ui.skeleton class="w-3/6 h-4"/>
    </div>
</div>

Installation

Shell
flexi-cli add select

Examples

Card

<div class="max-w-sm w-full p-8 rounded-md border border-border-strong bg-bg space-y-6">
    <x-ui.skeleton radius="base" class="aspect-video" />
    <div class="space-y-3">
        <x-ui.skeleton class="w-4/5 h-7" />
        <x-ui.skeleton class="w-9/12 h-4" />
        <x-ui.skeleton class="w-3/6 h-4" />
    </div>
</div>