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 skeletonNotes
- 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; setaria-busyon 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.