Skeleton
Loading placeholder animation for content that is still loading
Preview
Usage
import { Skeleton } from "@/components/ui/skeleton"
{/* Text skeleton */}
<div className="space-y-2">
<Skeleton className="h-4 w-[250px]" />
<Skeleton className="h-4 w-[200px]" />
</div>
{/* Card skeleton */}
<div className="flex items-center space-x-4">
<Skeleton className="h-12 w-12 rounded-full" />
<div className="space-y-2">
<Skeleton className="h-4 w-[250px]" />
<Skeleton className="h-4 w-[200px]" />
</div>
</div>Renders a pulsing div with bg-primary/10. Control the shape and size with className.
Install
npx shadcn add @bonsai/skeleton