Skeleton

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

Installation

npx asteria-ui 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" \| "rect"	"text"	Text gets a real default size (h-4 w-full, one line of text); circle and rect have no default size — size them 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.