Marquee

A scrolling component that displays content infinitely. It can scroll horizontally or vertically and supports pausing on hover. Use it to showcase text, images, or videos in a continuous loop.

byMagic UI

Installation

terminal

pnpm dlx layro-cli add @magicuidesign/marquee

npx layro-cli add @magicuidesign/marquee

npx layro-cli add @magicuidesign/marquee

bunx layro-cli add @magicuidesign/marquee

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

import { type ComponentPropsWithoutRef } from "react"

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

interface MarqueeProps extends ComponentPropsWithoutRef<"div"> {
  /**
   * Optional CSS class name to apply custom styles
   */
  className?: string
  /**
   * Whether to reverse the animation direction
   * @default false
   */
  reverse?: boolean