"use client";

import * as React from "react";
import { motion } from "framer-motion";
import { cn } from "@/lib/utils";

interface SkeletonShimmerProps extends React.HTMLAttributes<HTMLDivElement> {
  shimmerDuration?: number;
}

function SkeletonShimmer({
  shimmerDuration = 1.6,
  className,
  children,
  ...props
}: SkeletonShimmerProps) {
  return (
    <div
      className={cn(
        "relative overflow-hidden rounded-md border border-border/60 bg-card",
        className
      )}
      {...props}
    >
      <motion.div
        className="pointer-events-none absolute inset-0 z-10 text-muted-foreground opacity-40"
        style={{
          backgroundImage:
            "linear-gradient(110deg, transparent 0%, currentColor 45%, transparent 80%)",
        }}
        animate={{ x: ["-100%", "100%"] }}
        transition={{ duration: shimmerDuration, repeat: Infinity, ease: "linear" }}
      />
      {children && <div className="relative z-0">{children}</div>}
    </div>
  );
}

export { SkeletonShimmer };
export type { SkeletonShimmerProps };
Skeleton Shimmer

Dependencies

Files

Installation
