import * as React from "react";

import { cn } from "@/lib/utils";

type SkeletonVariant = "text" | "avatar" | "card" | "image";

export interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
  variant?: SkeletonVariant;
}

function Skeleton({ variant = "text", className, children, ...props }: SkeletonProps) {
  const variantStyles: Record<SkeletonVariant, string> = {
    text: "h-4 w-full rounded-md bg-muted",
    avatar: "h-12 w-12 rounded-full bg-muted",
    card: "h-40 w-full rounded-xl border border-border bg-card",
    image: "h-40 w-full rounded-lg bg-muted",
  };

  return (
    <div
      className={cn("relative overflow-hidden", variantStyles[variant], className)}
      {...props}
    >
      <div
        className="skeleton-shimmer pointer-events-none absolute inset-0 text-muted-foreground opacity-40"
        style={{
          backgroundImage:
            "linear-gradient(110deg, transparent 0%, currentColor 45%, transparent 80%)",
        }}
      />
      {children ? <div className="relative z-10">{children}</div> : null}
      <style jsx>{`
        @keyframes skeleton-shimmer {
          0% {
            transform: translateX(-100%);
          }
          100% {
            transform: translateX(100%);
          }
        }

        .skeleton-shimmer {
          animation: skeleton-shimmer 1.6s linear infinite;
        }
      `}</style>
    </div>
  );
}

export { Skeleton };
Skeleton

Dependencies

Files

Installation
