RzSkeleton

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

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

<RzSkeleton class="h-4 w-2/3" />
<RzSkeleton class="h-4 w-1/2" />
<RzSkeleton class="aspect-video w-full" />

Text

Source

<RzSkeleton class="h-4 w-full" />
<RzSkeleton class="h-4 w-full" />
<RzSkeleton class="h-4 w-3/4" />

Form

Source

<RzSkeleton class="h-4 w-20" />
<RzSkeleton class="h-8 w-full" />
<RzSkeleton class="h-8 w-24" />

Table

Source

<RzSkeleton class="h-4 flex-1" />
<RzSkeleton class="h-4 w-24" />
<RzSkeleton class="h-4 w-20" />

Media List

Dashboard Cards

Chat Messages

Complex Page

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