# Marquee

> Loop a row or column of content with optional fade and hover pause.

Source: https://www.honestui.com/docs/animated/marquee

```tsx
import { Marquee } from "@/registry/default/animated/marquee";

const items = ["Clear by default", "Motion aware", "Easy to adapt", "Built in React", "Ready for touch"];

export function MarqueeDemo() {
  return (
    <Marquee speed={22} gap="0.75rem" className="w-full py-4">
      {items.map((item) => (
        <span key={item} className="rounded-full border bg-card px-4 py-2 text-sm shadow-sm">
          {item}
        </span>
      ))}
    </Marquee>
  );
}

```

## Overview [#overview]

Use Marquee for non-essential collections such as partner marks, short tags, or ambient highlights. It duplicates a static set to create a seamless CSS loop.

## Installation [#installation]

<CliBlock commands="[&#x22;marquee&#x22;]" />

## Usage [#usage]

```tsx
import { Marquee } from "@/components/animated/marquee"

<Marquee speed={24}>{items.map((item) => <Tag key={item}>{item}</Tag>)}</Marquee>
```

## Accessibility [#accessibility]

The duplicate track is hidden from assistive technology, hover can pause the loop, and reduced-motion preferences stop the animation. Never place time-sensitive or uniquely actionable content only inside a marquee.

## API Reference [#api-reference]


  ### `direction`

type: `&#x22;left&#x22; | &#x22;right&#x22; | &#x22;up&#x22; | &#x22;down&#x22;` · default: `&#x22;left&#x22;`

Movement direction.

  ### `speed`

type: `number` · default: `30`

Loop duration in seconds.

  ### `pauseOnHover`

type: `boolean` · default: `true`

Pauses while the pointer is over the marquee.

  ### `gap`

type: `string` · default: `&#x22;1rem&#x22;`

Space between items and tracks.

  ### `fade`

type: `boolean` · default: `true`

Fades the leading and trailing edges.