WOW Effects

Marquee

An infinite auto-scrolling ticker. Great for logos, testimonials, and feature lists.

Next.js

React

TypeScript

Tailwind CSS

Radix UI

Framer Motion

TanStack

Recharts

Zod

React Hook Form

Next.js

React

TypeScript

Tailwind CSS

Radix UI

Framer Motion

TanStack

Recharts

Zod

React Hook Form

Installation

npx benflux-ui add marquee

Usage

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

const logos = ["Next.js", "React", "TypeScript", "Tailwind"]

// Horizontal (default)
<Marquee>
  {logos.map((logo) => (
    <div key={logo} className="px-4 py-2 border rounded-full">{logo}</div>
  ))}
</Marquee>

// Reverse direction
<Marquee reverse>
  {logos.map((logo) => (
    <div key={logo} className="px-4 py-2 border rounded-full">{logo}</div>
  ))}
</Marquee>

// Vertical
<Marquee vertical className="h-48">
  {items}
</Marquee>