Marquee

Installation

1. 1. Install the dependencies.

   npm install clsx tailwind-merge

2. 2. Add the cn helper, if you don't already have it.

   import { clsx, type ClassValue } from "clsx";
   import { twMerge } from "tailwind-merge";
   
   export function cn(...inputs: ClassValue[]) {
     return twMerge(clsx(inputs));
   }

3. 3. Copy the component into your project.

   "use client";
   
   import { Children, type ReactNode } from "react";
   import { cn } from "@/lib/utils";
   
   type MarqueeProps = {
     children: ReactNode;
     className?: string;
     /** Seconds for one full loop. */
     duration?: number;
     /** Scroll right-to-left by default; flip to reverse. */
     reverse?: boolean;
     /** Pause the loop while the cursor is over it. */
     pauseOnHover?: boolean;
     /** Fade the leading and trailing edges into the background. */
     fade?: boolean;
     /** Gap between items, as a CSS length. */
     gap?: string;
   };
   
   export function Marquee({
     children,
     className,
     duration = 32,
     reverse = false,
     pauseOnHover = true,
     fade = true,
     gap = "1rem",
   }: MarqueeProps) {
     const items = Children.toArray(children);
   
     return (
       <div
         className={cn("group relative w-full overflow-hidden", className)}
         style={
           fade
             ? {
                 maskImage:
                   "linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent)",
                 WebkitMaskImage:
                   "linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent)",
               }
             : undefined
         }
       >
         <div
           className={cn(
             "flex w-max motion-safe:animate-marquee",
             reverse && "[animation-direction:reverse]",
             pauseOnHover && "group-hover:[animation-play-state:paused]",
           )}
           style={
             {
               gap,
               "--marquee-duration": `${duration}s`,
               "--marquee-gap": gap,
             } as React.CSSProperties
           }
         >
           {[...items, ...items].map((item, index) => (
             <div key={index} className="shrink-0">
               {item}
             </div>
           ))}
         </div>
       </div>
     );
   }

   Expand code

Props