Skeleton
An animated placeholder for loading states.
Installation
$
Usage
import { Skeleton } from "@/components/ui/skeleton"Examples
Default
Placeholder blocks in the shape of what is loading. Size each one with className, and match the real layout: that is what stops the page jumping when the content lands.
import { cn } from "@/registry/lib/utils"
// @use-when a placeholder block held in position while real content loads.
function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="skeleton"
className={cn("bg-neutral-200 dark:bg-neutral-800 animate-pulse motion-reduce:animate-none rounded-md", className)}
{...props}
/>
)
}
export { Skeleton }