# Marquee

> An infinite scroller for logos, cards, tags or any content, horizontal or vertical, with edge fades and a pause control.

- Type: React component (Text & Effects)
- Access: Pro (the source needs a Wingo UI Pro plan, see https://wingo-ui.com/pricing)
- Version: 1.0.0
- Install: `npx wingo-ui@latest add marquee`
- Docs: https://wingo-ui.com/components/marquee

## Interaction

The content glides in a seamless loop at a steady pace in pixels per second, so long and short strips move at the same speed, and the ends fade into the background. Hover the strip, tab into a link inside it or rest a finger on it and it holds still until you let go. With showControl a round pause button sits next to the track; it is a toggle with aria-pressed, reachable with Tab and switched with Enter or Space. Screen readers read the content once, because the moving copies are hidden from them and from the keyboard. Copies are added on their own until the viewport is always covered, it stops painting while scrolled out of view, and under prefers-reduced-motion it turns into a still, wrapped row (or a clipped column). Right-to-left pages are supported.

## Installation

```bash
npx wingo-ui@latest add marquee
```

Pro item: run `npx wingo-ui@latest login` once with a Pro account. The CLI adds the files, their dependencies and a version record for updates.

With shadcn: `npx shadcn@latest add @wingo-ui/marquee` (needs the @wingo-ui registry with your API key in components.json)

Files:

- `components/ui/marquee.tsx`

npm dependencies: `npm i lucide-react motion`

Wingo UI dependencies (installed automatically):

- [Motion presets](https://wingo-ui.com/components/motion) ([Markdown](https://wingo-ui.com/components/motion.md))
- [UIProvider](https://wingo-ui.com/components/ui-config) ([Markdown](https://wingo-ui.com/components/ui-config.md))
- [useControllableState](https://wingo-ui.com/components/use-controllable-state) ([Markdown](https://wingo-ui.com/components/use-controllable-state.md))

## Usage

```tsx
import Marquee, { MarqueeItem } from "@/components/ui/marquee"

const tags = ["React", "Next.js", "Tailwind CSS", "TypeScript", "Motion", "Radix UI"]

export function TagStrip() {
  return (
    <Marquee speed={30} showControl>
      {tags.map((tag) => (
        <MarqueeItem key={tag} className="rounded-full bg-foreground/5 px-3 py-1.5 text-sm">
          {tag}
        </MarqueeItem>
      ))}
    </Marquee>
  )
}
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `children?` | `ReactNode` |  | The items, laid out in a row (or a column for up and down). Wrap each one in MarqueeItem, or pass any elements. |
| `direction?` | `"left" \| "right" \| "up" \| "down"` | `"left"` | Which way the content travels. Up and down make a vertical column that needs a height (h-80 by default). |
| `speed?` | `number` | `40` | Pixels per second. The loop duration comes from the measured content length, so the pace is the same for any content. |
| `gap?` | `"sm" \| "md" \| "lg"` | `"md"` | Space between items and between the repeated copies: 16 / 24 / 40px, one step smaller below 640px. |
| `repeat?` | `number` | `2` | The fewest copies of the content on the track. More copies are added on their own until the viewport is always covered. |
| `pauseOnHover?` | `boolean` | `true` | Holds still while the strip is hovered, while focus is inside it, and while a finger rests on it on touch screens. The pause control does not count, so play resumes right away. |
| `fade?` | `boolean` | `true` | Fades both ends of the strip into whatever sits behind it, with a CSS mask. |
| `fadeSize?` | `"sm" \| "md" \| "lg"` | `"md"` | How far the fade reaches: about 5%, 10% or 18% of the strip, with a floor and a ceiling in pixels. |
| `reverse?` | `boolean` | `false` | Flips the direction. Handy for stacked rows that should move against each other. |
| `paused?` | `boolean` |  | Controlled pause state; pair it with onPausedChange. Leave it undefined to let the control (and defaultPaused) own it. |
| `defaultPaused?` | `boolean` | `false` | Starts paused while uncontrolled. Pair it with showControl so people can start it. |
| `onPausedChange?` | `(paused: boolean) => void` |  | Fires when the pause control is toggled. |
| `showControl?` | `boolean` | `false` | Shows a small pause button next to the track, so people can stop motion that runs for long (WCAG 2.2.2). Hidden under reduced motion, where nothing moves. |
| `pauseLabel?` | `string` | `"Pause"` | The control's accessible name. It stays the same in both states; aria-pressed tells whether it is paused. |
| `playLabel?` | `string` | `"Play"` | The control's tooltip while paused. |
| `classNames?` | `Partial<Record<"viewport" \| "track" \| "group" \| "item" \| "control", string>>` |  | Extra classes for the clipping viewport, the moving track, each copy of the content, every MarqueeItem and the pause button. |
| `className?` | `string` |  | Extra classes for the root, merged last. Set the height of a vertical marquee here, e.g. h-[420px]. |

## Parts

### MarqueeItem (component)

An optional wrapper for one item. It never shrinks and picks up classNames.item from the marquee. Takes div props.

### MarqueeDirection (type)

The direction union: "left" | "right" | "up" | "down".

### MarqueeProps (type)

The props of Marquee: div props plus the options above.

### MarqueeItemProps (type)

The props of MarqueeItem, the same as a div.

### MarqueeGap (type)

The gap union: "sm" | "md" | "lg".

### MarqueeFadeSize (type)

The fade size union: "sm" | "md" | "lg".

### MarqueeSlot (type)

The keys of classNames.

## Examples

- **Logo strip**: The classic customer row, with wide gaps and soft edges.
- **Rows in opposite directions**: Two rows of cards, the second with reverse, so they slide past each other.
- **Vertical feed**: direction up in a fixed height, fading at the top and bottom.
- **Tag cloud**: Three rows of chips at different speeds.
- **Announcement bar with a pause button**: showControl adds a toggle with aria-pressed, for motion that runs for long.

## See also

- [Logo Cloud](https://wingo-ui.com/components/logo-cloud) ([Markdown](https://wingo-ui.com/components/logo-cloud.md))
- [Testimonials Section](https://wingo-ui.com/components/testimonials-section) ([Markdown](https://wingo-ui.com/components/testimonials-section.md))
- [Carousel](https://wingo-ui.com/components/carousel) ([Markdown](https://wingo-ui.com/components/carousel.md))
- [Scroll Area](https://wingo-ui.com/components/scroll-area) ([Markdown](https://wingo-ui.com/components/scroll-area.md))

---

Canonical: https://wingo-ui.com/components/marquee
More components: https://wingo-ui.com/components · Index for agents: https://wingo-ui.com/llms.txt