Skeleton

Placeholder loading shape for content that has not yet loaded, as a text line, circle, or rectangle.

Installation

npx paubha@latest add skeleton

import { Skeleton } from "@/components/ui/skeleton";

{isLoading ? <Skeleton className="h-4 w-32" /> : <p>{title}</p>}

Prop	Type	Default	Description
variant	"text" \| "circle" \| "rectangle"	"text"	Shape and default size: text is one 16px line (h-4 w-full, radius-sm), circle is 48px (size-12, fully round), rectangle is 120px tall (h-30 w-full, radius-md). Override the size via className.

Decorative. aria-hidden="true": Skeleton itself carries no meaning to assistive technology.
Loading container. Wrap skeletons in a container with aria-busy="true" while loading. That's the wrapping container's responsibility, not Skeleton's, since it has no way to know when loading actually finishes.
Announcing completion. Announce the swap to real content via a live region elsewhere on the page.