Components
Skeleton
Use to show a placeholder while content is loading. Match its shape to the content it stands in for, so the layout doesn't jump on load.
Preview
Rendered with live Cognition tokens — the muted fill pulses and remaps on theme change, no dark: classes.
Shapes
Skeleton is a single primitive — compose avatars, lines, media blocks, and form fields by sizing it with utility classes.
API
Prop
Type
Default
Description
className
string
undefined
Sets the shape — width, height, and radius of the placeholder.
...props
HTMLAttributes<div>
—
Native div attributes pass through.
Don't and Do
Don't
Don't drop a centered Spinner over a known layout — the page jumps when content arrives. And don't hardcode bg-gray-100 for the fill.
Do
// Mirror the real content's shape
<Skeleton className="h-4 w-[150px]" />import { Skeleton } from "@/components/ui/skeleton";
export function CardSkeleton() {
return (
<div className="flex items-center gap-4">
<Skeleton className="size-10 rounded-full" />
<div className="space-y-2">
<Skeleton className="h-4 w-[150px]" />
<Skeleton className="h-4 w-[100px]" />
</div>
</div>
);
}Drop-in ready. Size and shape it with className (height, width, rounded-full, …).