Components
Base Components
Skeleton
A placeholder that shows a loading state with a pulse animation.
Example
Installation
Create a skeleton.tsx file and paste the following code into it.
import { cn } from "@/lib/utils";function Skeleton({ className, ...props}: React.HTMLAttributes<HTMLDivElement>) { return ( <div data-slot="skeleton" className={cn("bg-muted animate-pulse rounded-md", className)} {...props} /> );}export { Skeleton };Check the import paths to ensure they match your project setup.
Usage
import { Skeleton } from "@/components/ui/skeleton";
<Skeleton className="h-4 w-full" />;Examples
Basic
Card placeholder
Avatar and text
API Reference
Skeleton is a simple div with animate-pulse and rounded-md. It accepts all standard HTML div attributes and className for sizing and layout.