Skip to content
Wave 2

Skeleton

A placeholder shape while content loads. Server-component safe.

  • Long operations with known progress: use Progress.

Install

Terminal
pnpm dlx shadcn@latest add @acme/skeleton

Or import from the package: import { Skeleton } from '@acme/react'

Examples

Basic

Loading customer…
skeleton-basic.tsx
import { Skeleton } from '@/components/ui/skeleton'

export default function SkeletonBasic() {
  return (
    <div role="status" aria-busy="true" className="flex w-full max-w-sm items-center gap-4">
      <span className="sr-only">Loading customer…</span>
      <Skeleton className="size-10 rounded-full" />
      <div className="flex flex-1 flex-col gap-2">
        <Skeleton className="h-4 w-3/4" />
        <Skeleton className="h-4 w-1/2" />
      </div>
    </div>
  )
}

Accessibility

You provide
  • Wrap the loading region in role="status" aria-busy="true" with screen-reader text ("Loading customer…").
Built in
  • Hidden from assistive technology.
  • The pulse stops under reduced motion.
WCAG 2.2 criteria
2.3.3, 4.1.3

Don’t

  • Show skeletons for more than a few seconds without a message.

Tokens

  • color.muted