Skeleton

Feedback

Shows a placeholder while content is loading.

npx shadcn@latest add skeleton

Card placeholder

Compose skeletons into the same layout as the real content.

Preview

Live

tsx

1<div className="rounded-lg border p-4">
2  <div className="flex items-center gap-4">
3    <Skeleton className="size-12 rounded-full" />
4    <div className="space-y-2">
5      <Skeleton className="h-4 w-36" />
6      <Skeleton className="h-3 w-24" />
7    </div>
8  </div>
9  <div className="mt-4 space-y-2">
10    <Skeleton className="h-3 w-full" />
11    <Skeleton className="h-3 w-4/5" />
12  </div>
13</div>

API reference

All props of the underlying Base UI primitive are forwarded. The table below documents the Shelf-specific props.

Prop	Type	Description