Lightweight loading skeleton with a smooth shimmer sweep animation.
Made by Léo"use client";
import { ShimmerSkeleton } from "@/components/unlumen-ui/shimmer-skeleton";
export const ShimmerSkeletonDemo = ({
animate = true,
}: {
animate?: boolean;
}) => {
return (
<div className="w-full max-w-sm space-y-4 p-8">
{/* Card skeleton */}
<div className="space-y-3">
<ShimmerSkeleton
className="h-40 w-full"
rounded="lg"
animate={animate}
/>
<div className="flex items-center gap-3">
<ShimmerSkeleton
className="h-10 w-10 shrink-0"
rounded="full"
animate={animate}
/>
<div className="flex-1 space-y-2">
<ShimmerSkeleton className="h-3.5 w-3/4" animate={animate} />
<ShimmerSkeleton className="h-3 w-1/2" animate={animate} />
</div>
</div>
<ShimmerSkeleton className="h-3 w-full" animate={animate} />
<ShimmerSkeleton className="h-3 w-5/6" animate={animate} />
<ShimmerSkeleton className="h-3 w-4/6" animate={animate} />
</div>
</div>
);
};Installation
Copy and paste the following code into your project:
import { type HTMLAttributes } from "react";
import { cn } from "@/lib/utils";
interface ShimmerSkeletonProps extends HTMLAttributes<HTMLDivElement> {
rounded?: "none" | "sm" | "md" | "lg" | "full";
animate?: boolean;
}
function ShimmerSkeleton({
className,
rounded = "md",
animate = true,
...props
}: ShimmerSkeletonProps) {
const roundedClass = {
none: "rounded-none",
sm: "rounded-sm",
md: "rounded-md",
lg: "rounded-lg",
full: "rounded-full",
}[rounded];
return (
<div
role="status"
aria-label="Loading"
className={cn(
"relative overflow-hidden bg-muted",
roundedClass,
className,
)}
{...props}
>
{animate && (
<span
aria-hidden="true"
className="pointer-events-none absolute inset-0 -translate-x-full"
style={{
background:
"linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--foreground) 6%, transparent) 50%, transparent 100%)",
animation: "shimmer 1.6s ease-in-out infinite",
}}
/>
)}
<style>{`@keyframes shimmer { to { transform: translateX(200%); } }`}</style>
</div>
);
}
export { ShimmerSkeleton };
export type { ShimmerSkeletonProps };Update the import paths to match your project setup.
Usage
import { ShimmerSkeleton } from "@/components/unlumen-ui/shimmer-skeleton";<ShimmerSkeleton className="h-4 w-48" />
<ShimmerSkeleton className="h-10 w-10" rounded="full" />Props
| Prop | Type | Default | Description |
|---|---|---|---|
rounded | "none" | "sm" | "md" | "lg" | "full" | "md" | Border radius of the skeleton block. |
animate | boolean | true | Toggle the shimmer sweep animation. |
className | string | — | Controls width, height, and extra styles. |