Skeleton

Use to show a placeholder while content is loading.

Basic

Basic skeleton shapes.

<Skeleton Class="h-4 w-[250px]" />
<Skeleton Class="h-4 w-[200px]" />
<Skeleton Class="h-4 w-[150px]" />

Card Loading

Skeleton for a card component.

<div class="flex items-center space-x-4">
    <Skeleton Class="h-12 w-12 rounded-full" />
    <div class="space-y-2">
        <Skeleton Class="h-4 w-[250px]" />
        <Skeleton Class="h-4 w-[200px]" />
    </div>
</div>

Full Card

Complete card skeleton.

<Card>
    <CardHeader>
        <div class="flex items-center space-x-4">
            <Skeleton Class="h-10 w-10 rounded-full" />
            <div class="space-y-2">
                <Skeleton Class="h-4 w-[150px]" />
                <Skeleton Class="h-3 w-[100px]" />
            </div>
        </div>
    </CardHeader>
    <CardContent>
        <Skeleton Class="h-4 w-full" />
        <Skeleton Class="h-4 w-full" />
    </CardContent>
</Card>