- Components
- 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>