Skeleton

Overview

Skeleton renders a div with animate-pulse and a muted background; the consumer’s class merges in to set its size and shape. There is no headless primitive underneath, as there is no behavior beyond the CSS animation.

Install

navius add skeleton --to ./src/MyApp --namespace MyApp.Ui

Usage

@using Zits.Ui.Components

<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>

Parts and props

Skeleton is a single element with no part tree. The component adds:

Prop	Type	Default	Description
Shimmer	bool	false	Swaps the animate-pulse for a Navius.Motion motion-shimmer sweep. Inert unless the app links _content/Navius.Motion/navius-motion.css.

Styling surface

Attributes is merged with the preset class set via Cn.Merge, caller classes applied last; size and shape are set entirely through class (e.g. h-12 w-12 rounded-full).

Parameter	Values
Shimmer	true · false

Data attribute hooks

None: the component renders a bare div with no data-* hooks of its own.

Skeleton is presentational only; it carries no role or ARIA state, since it is meant to be replaced by real content rather than announced as a distinct loading region.