Skeleton

Use to show a placeholder while content is loading.

<div class="flex w-full max-w-sm flex-col gap-3">
    <twig:ui:Skeleton class="aspect-video w-full rounded-xl" />
    <div class="flex flex-col gap-2">
        <twig:ui:Skeleton class="h-4 w-full" />
        <twig:ui:Skeleton class="h-4 w-3/4" />
    </div>
</div>

Usage

<twig:ui:Skeleton class="h-4 w-[250px]" />

Examples

Avatar

<div class="flex items-center gap-3">
    <twig:ui:Skeleton class="size-10 rounded-full" />
    <div class="flex flex-col gap-2">
        <twig:ui:Skeleton class="h-4 w-[150px]" />
        <twig:ui:Skeleton class="h-4 w-[100px]" />
    </div>
</div>

Text

<div class="flex w-full max-w-sm flex-col gap-2">
    <twig:ui:Skeleton class="h-4 w-full" />
    <twig:ui:Skeleton class="h-4 w-full" />
    <twig:ui:Skeleton class="h-4 w-2/3" />
</div>

Card

<twig:ui:Card class="w-full max-w-sm">
    <twig:ui:Card:Content>
        <twig:ui:Skeleton class="aspect-video w-full rounded-lg" />
    </twig:ui:Card:Content>
    <twig:ui:Card:Header>
        <twig:ui:Skeleton class="h-5 w-3/4" />
        <twig:ui:Skeleton class="h-4 w-full" />
    </twig:ui:Card:Header>
</twig:ui:Card>

Grid

<div class="grid w-full max-w-sm grid-cols-3 gap-2">
    <twig:ui:Skeleton class="h-8" />
    <twig:ui:Skeleton class="h-8" />
    <twig:ui:Skeleton class="h-8" />
</div>

Animations

Set animation to shimmer, pulse or none. Defaults to shimmer.

shimmer

pulse

none

<div class="flex flex-wrap gap-8">
    <div class="flex flex-col items-center gap-2">
        <twig:ui:Skeleton animation="shimmer" class="h-12 w-24" />
        <span class="text-xs text-neutral-500 dark:text-neutral-400">shimmer</span>
    </div>
    <div class="flex flex-col items-center gap-2">
        <twig:ui:Skeleton animation="pulse" class="h-12 w-24" />
        <span class="text-xs text-neutral-500 dark:text-neutral-400">pulse</span>
    </div>
    <div class="flex flex-col items-center gap-2">
        <twig:ui:Skeleton animation="none" class="h-12 w-24" />
        <span class="text-xs text-neutral-500 dark:text-neutral-400">none</span>
    </div>
</div>

Synced shimmer

<twig:ui:Skeleton:Group class="grid w-full max-w-xl grid-cols-3 gap-4 rounded-xl">
    <twig:ui:Skeleton class="h-24 rounded-xl" />
    <twig:ui:Skeleton class="h-24 rounded-xl" />
    <twig:ui:Skeleton class="h-24 rounded-xl" />
</twig:ui:Skeleton:Group>

RTL

<div class="flex flex-wrap gap-8">
    <div class="flex items-center gap-3">
        <twig:ui:Skeleton class="size-10 rounded-full" />
        <div class="flex flex-col gap-2">
            <twig:ui:Skeleton class="h-4 w-[150px]" />
            <twig:ui:Skeleton class="h-4 w-[100px]" />
        </div>
    </div>
    <div dir="rtl" class="flex items-center gap-3">
        <twig:ui:Skeleton class="size-10 rounded-full" />
        <div class="flex flex-col gap-2">
            <twig:ui:Skeleton class="h-4 w-[150px]" />
            <twig:ui:Skeleton class="h-4 w-[100px]" />
        </div>
    </div>
</div>

API Reference

`<twig:ui:Skeleton>`

Prop	Type	Description
`animation`	`'shimmer'` \| `'pulse'` \| `'none'`	The loading animation. Defaults to `shimmer`
`as`	`string`	The HTML tag to render. Defaults to `div`

`<twig:ui:Skeleton:Group>`

Prop	Type	Description
`as`	`string`	The HTML tag to render. Defaults to `div`