Feedback and status
Skeleton
A placeholder surface for preserving layout while content loads.
⠋
Install
npx shadcn@latest add https://4af.selfsimilar.dev/r/skeleton.jsonUsage
import { Skeleton } from "@/components/ui/skeleton";
<Skeleton className="h-4 w-32" />API
Main export: Skeleton
A generic loading placeholder sized by normal utility classes. Its pulse is disabled for reduced motion.
Shape
There is no shape prop; size and shape it with utilities. Corners are square unless you add a
rounded-* class.
<Skeleton className="h-4 w-2/3" /> {/* a line of text */}
<Skeleton className="size-12 rounded-full" /> {/* an avatar */}
<Skeleton className="aspect-video w-full rounded-lg" /> {/* a thumbnail */}