"use client";

import * as React from "react";
import { Slot } from "@radix-ui/react-slot";
import { cva, type VariantProps } from "class-variance-authority";
import { cn } from "@/lib/utils";

const shimmerButtonVariants = cva(
  "group relative inline-flex items-center justify-center gap-2 overflow-hidden rounded-full font-semibold transition-all duration-300 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50",
  {
    variants: {
      variant: {
        default: "bg-primary text-primary-foreground",
        outline:
          "border border-input bg-transparent text-foreground hover:border-foreground/50",
        secondary: "bg-secondary text-secondary-foreground",
      },
      size: {
        sm: "px-4 py-2 text-sm",
        md: "px-6 py-2.5 text-sm",
        lg: "px-8 py-3 text-base",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "md",
    },
  }
);

export interface ShimmerButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
    VariantProps<typeof shimmerButtonVariants> {
  asChild?: boolean;
  /** Color of the shimmer effect. Defaults to white with opacity */
  shimmerColor?: string;
}

export function ShimmerButton({
  className,
  variant,
  size,
  asChild = false,
  shimmerColor = "rgba(255, 255, 255, 0.4)",
  children,
  ...props
}: ShimmerButtonProps) {
  const Comp = asChild ? Slot : "button";

  return (
    <Comp
      className={cn(shimmerButtonVariants({ variant, size, className }))}
      {...props}
    >
      {/* Shimmer overlay - animates on hover */}
      <span
        className="pointer-events-none absolute inset-0 opacity-0 transition-opacity duration-300 group-hover:opacity-100 group-hover:animate-shimmer-slide"
        style={{
          background: `linear-gradient(
            120deg,
            transparent 0%,
            transparent 40%,
            ${shimmerColor} 50%,
            transparent 60%,
            transparent 100%
          )`,
        }}
        aria-hidden="true"
      />

      {/* Content */}
      <span className="relative z-10">{children}</span>
    </Comp>
  );
}
Shimmer Button

Dependencies

Files

Installation
