Loading...
Loading...
The Skeleton component provides a placeholder animation for content that is loading. Perfect for improving perceived performance and user experience during data fetching.
import { Skeleton } from '@/components/ui/skeleton';
// Basic skeleton
<Skeleton className="h-4 w-full" />
// Text skeleton
<div className="space-y-2">
<Skeleton className="h-4 w-full" />
<Skeleton className="h-4 w-5/6" />
<Skeleton className="h-4 w-4/6" />
</div>
// Avatar skeleton
<Skeleton className="h-12 w-12 rounded-full" />
// Card skeleton
<div className="border rounded-lg p-6 space-y-4">
<Skeleton className="h-6 w-3/4" />
<Skeleton className="h-4 w-full" />
<Skeleton className="h-4 w-full" />
</div>
// Image skeleton
<Skeleton className="h-[200px] w-full rounded-lg" />
// Custom shapes
<Skeleton className="h-16 w-16 rounded-full" />
<Skeleton className="h-16 w-16 rounded-md" />
<Skeleton className="h-16 w-16" />