Skeleton

Used to show a placeholder while content is loading.

Install

npx shadcn@latest add https://atomx.acau.net/r/skeleton.json

Usage

Render Skeleton blocks shaped like the content they will replace once it loads. Use Tailwind utilities to size each block.

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

Preview

Loading row

Card placeholder

Props

Skeleton extends React.HTMLAttributes<HTMLDivElement>. Use className to size and shape it.