Skeleton

A placeholder for loading content — a shallow well carved into the surface where the real element will land, pulsing gently while it waits.

tsx
import { Skeleton } from "@/registry/seam/ui/skeleton"

export default function SkeletonDemo() {
  return (
    <div className="flex w-full max-w-sm items-center gap-3.5">
      <Skeleton className="size-11 shrink-0 rounded-full" />
      <div className="grid w-full gap-2">
        <Skeleton className="h-4 w-3/5" />
        <Skeleton className="h-4 w-4/5" />
      </div>
    </div>
  )
}
bunx --bun @seamui/cli@latest add skeleton

Notes

  • The pulse is opacity-only, so it stays on under reduced motion — loading feedback never goes dead, it just doesn't travel.
  • Renders a plain <div> with no announced content; set aria-busy on the loading region and announce completion there, rather than labeling individual skeletons.

Press feedback, reduced motion, and haptics follow the global policy — see Motion and Haptics.