Component

Skeleton

Animated placeholder shown while content is loading.

Loading list

live editor — edit to update preview

<div className="space-y-3">
  <Skeleton className="h-5 w-48" />
  <Skeleton className="h-4 w-full" />
  <Skeleton className="h-4 w-4/5" />
  <Skeleton className="h-4 w-3/5" />
</div>

Card skeleton

live editor — edit to update preview

<div className="border border-border-light rounded-xl p-5 space-y-3">
  <Skeleton className="h-5 w-32" />
  <Skeleton className="h-4 w-full" />
  <Skeleton className="h-4 w-2/3" />
  <div className="flex gap-2 pt-2">
    <Skeleton className="h-8 w-20 rounded-md" />
    <Skeleton className="h-8 w-20 rounded-md" />
  </div>
</div>

Props

Prop	Type	Default	Description
className	string	—	Use to set height, width, and shape. e.g. h-5 w-32 rounded-full.