<Skeleton Class="h-12 w-12 rounded-full" />Installation
Install the skeleton component using the command or manual steps.
blazor-shadcn add skeletonUsage
@using BlazorShadcn.Components.UI<Skeleton Class="h-[20px] w-[100px] rounded-full" />Examples
Avatar
<div class="flex w-fit items-center gap-4">
<Skeleton Class="h-10 w-10 shrink-0 rounded-full" />
<div class="grid gap-2">
<Skeleton Class="h-4 w-[150px]" />
<Skeleton Class="h-4 w-[100px]" />
</div>
</div>Card
<Card Class="w-full max-w-xs">
<CardHeader>
<Skeleton Class="h-4 w-2/3" />
<Skeleton Class="h-4 w-1/2" />
</CardHeader>
<CardContent>
<Skeleton Class="aspect-video w-full" />
</CardContent>
</Card>Text
<div class="flex w-full max-w-xs flex-col gap-2">
<Skeleton Class="h-4 w-full" />
<Skeleton Class="h-4 w-full" />
<Skeleton Class="h-4 w-3/4" />
</div>Form
<div class="flex w-full max-w-xs flex-col gap-7">
<div class="flex flex-col gap-3">
<Skeleton Class="h-4 w-20" />
<Skeleton Class="h-8 w-full" />
</div>
<div class="flex flex-col gap-3">
<Skeleton Class="h-4 w-24" />
<Skeleton Class="h-8 w-full" />
</div>
<Skeleton Class="h-8 w-24" />
</div>Table
<div class="flex w-full max-w-sm flex-col gap-2">
@for (var index = 0; index < 5; index++)
{
<div class="flex gap-4">
<Skeleton Class="h-4 flex-1" />
<Skeleton Class="h-4 w-24" />
<Skeleton Class="h-4 w-20" />
</div>
}
</div>