Shining Skeleton

Cards 9

About

A sleek skeleton loader with a smooth shimmer effect. Perfect for placeholders that feel alive while content loads.

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

Code

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

Usage.tsx

import { ShiningSkeleton } from "@/components/ui/shining-skeleton";

export default function DemoOne() {
  	return (
		<div className="flex w-full h-screen items-center justify-center p-6">
			<div className="w-[350px] rounded-2xl border p-4 shadow-md space-y-4">
				{/* Header with avatar */}
				<div className="flex items-center space-x-4">
					<ShiningSkeleton className="size-16 rounded-full" />
					<div className="flex-1 space-y-2">
						<ShiningSkeleton className="h-5 w-2/3 rounded-md" />
						<ShiningSkeleton className="h-4 w-1/2 rounded-md" />
					</div>
				</div>

				{/* Post/image placeholder */}
				<ShiningSkeleton className="aspect-video w-full rounded-xl" />

				{/* Footer actions */}
				<div className="flex space-x-4">
					<ShiningSkeleton className="h-5 flex-1 rounded-md" />
					<ShiningSkeleton className="h-5 flex-1 rounded-md" />
					<ShiningSkeleton className="h-5 flex-1 rounded-md" />
				</div>
			</div>
		</div>
	);
}