Skeleton

Holds a layout's shape while it loads. Hidden from screen readers; the loading region is marked busy and announces once.

Sourcecomponents/skeleton.tsx

On a raised surface

On the page

Usage

Skeleton usage

import { Skeleton } from "@/components/skeleton";
export function SkeletonUsage() {  return (    <div aria-busy="true" className="flex items-center gap-3">      <p role="status" className="sr-only">        Loading projects…      </p>      <Skeleton className="size-10 rounded-full" />      <div className="flex flex-col gap-2">        <Skeleton className="h-4 w-48" />        <Skeleton className="h-4 w-32" />      </div>    </div>  );}

When to use

Use when

Loading content whose layout you know: size blocks to match it. Mark the region aria-busy with one sr-only status

Don’t use when

Unknown layouts or actions (use Spinner); one announcement per block