Skeleton

Composition preview

Try Skeleton alongside its related feedback & loading components. These examples keep all actions local.

Usage

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

<>
<div aria-hidden="true" className="flex flex-col gap-3">
  <Skeleton className="h-4 w-3/4" />
  <Skeleton className="h-4 w-1/2" />
</div>
</>

Composition recipe. Supply application state, handlers and persistence in the owning product component. Inspect the installed source before extending its API.

API & composition

className for dimensions; asChild for an existing loading layout

Usage & accessibility

Preserve layout and respect reduced motion. Do not announce every decorative skeleton.

Implementation contract

src/components/ui/skeleton.tsx

Use named variants and semantic theme tokens. Preserve existing input values, refs, focus and cancellation behavior. Verify keyboard, narrow layouts and pending/error states when behavior changes.