1. Components
  2. skeleton

Skeleton

A placeholder component that mimics the structure of content being loaded, enhancing the user experience during loading states.

sd

description

description

<div class="wfull max-w-xl flex items-start gap-x-4  animate-pulse">
    <div class="size-14 rd-full bg-bg-muted">
    </div>
    <div class="flex-1 space-y-3">
        <h3 class="text-xl content-['skeleton'] text-transparent w-4/5 rd-full bg-bg-muted">sd</h3>
        <p class="text-transparent text-xs w-9/12 bg-bg-muted rd-full">
            description
        </p>
        <p class="text-transparent text-xs w-3/6 bg-bg-muted rd-full">
            description
        </p>
    </div>
</div>

Card

description

description

<div class="max-w-sm wfull p-8 rd-md b-border-strong bg-bgy space-y-6   animate-pulse">
    <div class="aspect-video bg-bg-muted rd animate-pulse"></div>
    <div class="space-y-3 text-fg">
        <h3 class="text-lg content-['skeleton'] text-transparent rd-full bg-bg-muted"></h3>
        <p class="text-transparent text-xs w-9/12 bg-bg-muted rd-full">
            description
        </p>
        <p class="text-transparent text-xs w-3/6 bg-bg-muted rd-full">
            description
        </p>
    </div>
</div>