Skeleton

The RzSkeleton component reproduces the shadcn/ui skeleton pattern as a feedback placeholder for loading states. Use it to reserve layout space while async content is loading.

Usage

Source

<RzSkeleton class="h-5 w-24 rounded-full" />

Avatar

Source

<div class="flex w-fit items-center gap-4">
    <RzSkeleton class="size-10 shrink-0 rounded-full" />
    <div class="grid gap-2">
        <RzSkeleton class="h-4 w-[150px]" />
        <RzSkeleton class="h-4 w-[100px]" />
    </div>
</div>

Card

Source

<div class="space-y-2 p-6">
    <RzSkeleton class="h-4 w-2/3" />
    <RzSkeleton class="h-4 w-1/2" />
</div>
<div class="px-6 pb-6">
    <RzSkeleton class="aspect-video w-full" />
</div>

Text

Source

<div class="mx-auto p-8 mb-5 flex w-full max-w-xs flex-col gap-2">
    <RzSkeleton class="h-4 w-full" />
    <RzSkeleton class="h-4 w-full" />
    <RzSkeleton class="h-4 w-3/4" />
</div>

Form

Source

<div class="mx-auto p-8 mb-5 flex w-full max-w-xs flex-col gap-7">
    <div class="flex flex-col gap-3">
        <RzSkeleton class="h-4 w-20" />
        <RzSkeleton class="h-8 w-full" />
    </div>
    <div class="flex flex-col gap-3">
        <RzSkeleton class="h-4 w-24" />
        <RzSkeleton class="h-8 w-full" />
    </div>
    <RzSkeleton class="h-8 w-24" />
</div>

Table

Source

@for (var index = 0; index < 5; index++)
                        {
                            <div class="flex gap-4">
                                <RzSkeleton class="h-4 flex-1" />
                                <RzSkeleton class="h-4 w-24" />
                                <RzSkeleton class="h-4 w-20" />
                            </div>
                        }

Media List

Dashboard Cards

Chat Messages

Complex Page

Compose multiple RzSkeleton groups to build realistic placeholders for entire pages while data loads.

Component Parameters

RzSkeleton

Property	Description	Type	Default
`ChildContent`	Optional nested content rendered inside the skeleton container.	`RenderFragment`	`null`