import { Skeleton } from "@/components/ui/skeleton";
export function SkeletonDemo() {
return (
<div className="w-full max-w-xs space-y-3">
<Skeleton className="h-36 w-full" />
<div className="space-y-2">
<Skeleton className="h-4 w-full" />
<Skeleton className="h-4 w-1/2" />
</div>
</div>
);
}
Installation
npx shadcn@latest add @eo-n/skeleton
Usage
Import all parts and piece them together.
import { Skeleton } from "@/components/ui/skeleton";
<Skeleton />
Examples
Pulse
import { Skeleton } from "@/components/ui/skeleton";
export function SkeletonDemo() {
return (
<div className="w-full max-w-xs space-y-3">
<Skeleton className="h-36 w-full" />
<div className="space-y-2">
<Skeleton className="h-4 w-full" />
<Skeleton className="h-4 w-1/2" />
</div>
</div>
);
}
Shimmer
import { Skeleton } from "@/components/ui/skeleton";
export function SkeletonShimmer() {
return (
<div className="w-full max-w-xs space-y-3">
<Skeleton className="h-36 w-full" variant="shimmer" />
<div className="space-y-2">
<Skeleton className="h-4 w-full" variant="shimmer" />
<Skeleton className="h-4 w-1/2" variant="shimmer" />
</div>
</div>
);
}
Gradient
import { Skeleton } from "@/components/ui/skeleton";
export function SkeletonGradient() {
return (
<div className="w-full max-w-xs space-y-3">
<Skeleton className="h-36 w-full" variant="gradient" />
<div className="space-y-2">
<Skeleton className="h-4 w-full" variant="gradient" />
<Skeleton className="h-4 w-1/2" variant="gradient" />
</div>
</div>
);
}
API Reference
Root
The main container component for handling skeleton props.
Prop | Type | Default |
---|---|---|
variant? | "pulse" | "shimmer" | "gradient" | null | "pulse" |