About
A loading placeholder block with a pulsing shimmer animation, used to indicate content that is still loading.
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Skeleton to your project and fits it to your theme.
Code
How Skeleton is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
import { Skeleton } from "@/components/ui/skeleton";
export default function SkeletonDemo() {
return (
<div className="flex flex-col gap-3 w-64">
<Skeleton className="h-4 w-full rounded" />
<Skeleton className="h-4 w-3/4 rounded" />
<Skeleton className="h-4 w-1/2 rounded" />
</div>
);
}
Dependencies
More by mayurrawte
View all
Dropdown Menu
Avatar
Textarea
Loader
Separator