Skeleton

Animated placeholder elements that indicate content is loading, improving perceived performance.

Preview

Card Skeleton

Profile Skeleton

Usage

tsx
import { Skeleton } from "zostel-ui";

{/* Card skeleton */}
<div className="space-y-4">
  <Skeleton className="h-32 w-full rounded-lg" />
  <Skeleton className="h-5 w-3/4" />
  <Skeleton className="h-4 w-1/2" />
</div>

{/* Profile skeleton */}
<div className="flex items-center gap-3">
  <Skeleton className="h-12 w-12 rounded-full" />
  <div className="space-y-2">
    <Skeleton className="h-4 w-[150px]" />
    <Skeleton className="h-3 w-[100px]" />
  </div>
</div>

Props

className
Type: string
Default: —

CSS classes to control size, shape, and spacing of the skeleton element
Previous Progress Next Scroll Area