Skeleton

A placeholder block that mimics the shape of loading content (text lines, images, cards) with an animated shimmer while real data loads.

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.

import Skeleton from "@/components/ui/skeleton";

export default function SkeletonDemo() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-2">
      <Skeleton height={18} />
      <Skeleton width="70%" height={18} />
    </div>
  );
}