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>
Prev
Modal

Blocking dialog wind...

Next
On this page