Marquee

Component

Preview

Preview react

Usage

import { Marquee } from "@/components/ui/marquee"

export function MarqueeDemo() {
return (
  <Marquee gap={24}>
    <div className="w-32 h-20 bg-muted rounded-md flex items-center justify-center text-sm">Slide 1</div>
    <div className="w-32 h-20 bg-muted rounded-md flex items-center justify-center text-sm">Slide 2</div>
    <div className="w-32 h-20 bg-muted rounded-md flex items-center justify-center text-sm">Slide 3</div>
    <div className="w-32 h-20 bg-muted rounded-md flex items-center justify-center text-sm">Slide 4</div>
    <div className="w-32 h-20 bg-muted rounded-md flex items-center justify-center text-sm">Slide 5</div>
  </Marquee>
)
}

Installation

CLI

npm

npx shadcn@latest add https://devx-op.github.io/arkitect-ui/r/r/marquee.json

pnpm

pnpm dlx shadcn@latest add https://devx-op.github.io/arkitect-ui/r/r/marquee.json

bun

bunx shadcn@latest add https://devx-op.github.io/arkitect-ui/r/r/marquee.json

Manual

components/ui/marquee.tsx

"use client"

import { Marquee as ArkMarquee } from "@ark-ui/react/marquee"
import { type ComponentProps } from "react"
import { cn } from "@/lib/utils"

export interface MarqueeProps
  extends Omit<ComponentProps<typeof ArkMarquee.Root>, "children" | "speed" | "autoFill" | "reverse">
{
  speed?: number
  direction?: "left" | "right"
  children?: React.ReactNode
}

export function Marquee({
  className,
  speed = 50,
  direction = "left",
  children,
  ...props
}: MarqueeProps) {
  return (
    <ArkMarquee.Root
      className={cn("overflow-hidden", className)}
      autoFill
      speed={speed}
      reverse={direction === "right"}
      {...props}
    >
      <ArkMarquee.Viewport>
        <ArkMarquee.Content>{children}</ArkMarquee.Content>
      </ArkMarquee.Viewport>
    </ArkMarquee.Root>
  )
}