Haedong
016

Skeleton

Feedback

Customize

Shape

Code

<div className="flex flex-col gap-2">
  <Skeleton className="h-3 w-56" />
  <Skeleton className="h-3 w-40" />
  <Skeleton className="h-3 w-48" />
</div>

Install

npx shadcn@latest add https://components.haedong.dev/r/skeleton.json

Props

Extends the native div props. It is aria-hidden; mark the loading region aria-busy so assistive tech announces the state once.

PropTypeDescription
classNamestringSize and shape: h-3 w-40 for a text line, size-9 for a control, h-24 for a block.