Shapes Skeleton

Component 5

About

A set of decorative loading placeholders (circle, square, rounded square, pill, and bar) that pulse calmly while content loads, with sizes from sm to xl and reduced-motion support.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Shapes Skeleton to your project and fits it to your theme.

Code

How Shapes Skeleton is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import {
  CircleSkeleton,
  SquareSkeleton,
  RoundedSkeleton,
  PillSkeleton,
  BarSkeleton,
} from "@/components/ui/skeleton-shapes";

export default function SkeletonShapesDemo() {
  return (
    <div className="flex w-full max-w-md flex-col gap-4 p-6">
      <div className="flex items-center gap-4">
        <CircleSkeleton />
        <SquareSkeleton />
        <RoundedSkeleton />
        <PillSkeleton size="lg" />
      </div>
      <BarSkeleton />
      <BarSkeleton className="w-2/3" />
    </div>
  );
}