Skeleton
@xui/skeletonTurn an existing element into a loading placeholder in place.
Install
pnpm add @xui/skeleton Add the barrel to a standalone component's imports:
import { XuiSkeletonImports } from '@xui/skeleton';@Component({ imports: [XuiSkeletonImports], // …})Examples
Default
Loading preview…
<div class="flex w-fit items-center gap-4"> <xui-skeleton class="h-12 w-12 rounded-full" /> <div class="space-y-2"> <xui-skeleton class="h-4 w-[250px]" /> <xui-skeleton class="h-4 w-[200px]" /> </div></div>Mask in place
Loading preview…
<div class="grid max-w-2xl grid-cols-2 gap-8"> <div class="space-y-3"> <p xuiText color="subtle" size="sm">loading</p> <h3 xuiHeading xuiSkeleton>Quarterly report</h3> <p xuiText color="muted" xuiSkeleton> Revenue grew by 12% against the previous quarter, driven mainly by renewals. </p> <button xuiButton xuiSkeleton>Download</button> </div> <div class="space-y-3"> <p xuiText color="subtle" size="sm">loaded</p> <h3 xuiHeading>Quarterly report</h3> <p xuiText color="muted"> Revenue grew by 12% against the previous quarter, driven mainly by renewals. </p> <button xuiButton>Download</button> </div></div>API
Turn an existing element into a loading placeholder in place.
Inputs
xuiSkeletonbooleanWhether the placeholder is showing. Bare xuiSkeleton means always on; bind it to toggle.trueA placeholder block standing in for content that has not loaded.
Inputs
classClassValueThe user-defined classes''