Components / Skeleton

Skeleton

A pulsing placeholder to show while content loads. Pure Tailwind: a div with animate-pulse that merges any consumer class to set its size and shape.

Examples

Set the dimensions and shape with class. Compose several to mock a loading card.

razor

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

Installation

Copy the component source into your project with the CLI.

Terminal bash

navius add skeleton

API reference

Pass any extra attributes (including class); they are splatted onto the root div and the class is merged.

Prop	Type	Default
ChildContent	RenderFragment?	-
class	string?	-