Components
Skeleton
Use to show a placeholder while content is loading.
Hey there
A lightweight placeholder component that displays a pulsing shimmer effect while content is loading. Built with Tailwind CSS animations and customizable via utility classes.
Features
- Shimmer Animation — Smooth gradient sweep animation using CSS keyframes
- Flexible Sizing — Works with any dimensions via
className - Rounded Styling — Default rounded corners that blend with your design
- Accessible — Uses
data-slotattribute for styling hooks
Installation
npx shadcn@latest add https://ui.quickprimetech.com/r/skeleton.jsonimport { cn } from "@/lib/utils";
export function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="skeleton"
className={cn(
"relative overflow-hidden bg-muted rounded-md",
"before:absolute before:inset-0 before:-translate-x-full before:animate-shimmer",
"before:bg-linear-to-r before:from-transparent before:via-foreground/10 before:to-transparent",
className,
)}
{...props}
/>
);
}Usage
import { Skeleton } from "@/components/ui/skeleton";<div className="space-y-3">
<div className="flex gap-2 items-center">
<Skeleton className="size-8 rounded-full" />
<Skeleton className="h-6 w-full rounded-md" />
</div>
<div className="space-y-2 pl-8">
<div className="flex gap-2 items-center">
<Skeleton className="size-8 rounded-full" />
<Skeleton className="h-6 w-full rounded-md" />
</div>
<div className="flex gap-2 items-center">
<Skeleton className="size-8 rounded-full" />
<Skeleton className="h-6 w-full rounded-md" />
</div>
</div>
</div>