<div className="space-y-4">
{/* <Skeleton className="h-44 w-64" />
<div className="flex items-center space-x-4">
<Skeleton className="size-10 rounded-full" />
<div className="space-y-2">
<Skeleton className="h-4 w-44" />
<Skeleton className="h-4 w-36" />
</div>
</div> */}
</div>npx shadcn@latest add @dotui/skeletonUse skeleton components as placeholders while content is loading.
import { Skeleton, SkeletonProvider } from "@/components/ui/skeleton";<SkeletonProvider isLoading={true}>
<Skeleton className="h-4 w-32" />
</SkeletonProvider>Use the controls below to experiment with different skeleton props and see the live preview and code update.
<SkeletonProvider$1 isLoading>
<div className="flex items-center gap-4">
<Skeleton$1 className="size-12 rounded-full" />
<div className="space-y-2">
<Skeleton$1 className="h-4 w-32" />
<Skeleton$1 className="h-4 w-24" />
</div>
</div>
</SkeletonProvider$1>Missing description.
| Prop | Type | Default | |
|---|---|---|---|
boolean | — |
Last updated on 1/13/2026
Bringing singularity to the web.
Built with passion by @mehdibha.