Skeleton

A low-level building block for constructing placeholder loading states. Renders an animated pulse rectangle that you size and shape with utility classes to match the content it replaces.

Import

import { Skeleton } from '@wavebooking/aqua-fusion';

Preview

Usage

<Skeleton className="h-4 w-48" />

Card skeleton

Compose multiple Skeleton elements to create a loading placeholder for a card layout.

<div className="space-y-3 rounded-lg border p-4">
  <Skeleton className="h-32 w-full" />
  <Skeleton className="h-4 w-3/4" />
  <Skeleton className="h-4 w-1/2" />
  <div className="flex gap-2">
    <Skeleton className="h-8 w-20" />
    <Skeleton className="h-8 w-20" />
  </div>
</div>

Avatar skeleton

<div className="flex items-center gap-3">
  <Skeleton className="h-10 w-10 rounded-full" />
  <div className="space-y-2">
    <Skeleton className="h-4 w-32" />
    <Skeleton className="h-3 w-24" />
  </div>
</div>

Props

The Skeleton component accepts all standard div HTML attributes. Use className to control dimensions, border radius, and any additional styling.