# Marquee

Endlessly scrolling strip of content with soft faded edges. Press and hold to ease it gently to a stop so you can read an item; let go and it picks back up.

> Primitive · Pro · Data Display — React Native, Expo Go compatible.

## Install

```bash
npx @lumioui/cli add pro/marquee
```

## Import

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

## Variants

- `reverse` — Reverse: `npx @lumioui/cli add pro/marquee-reverse`
- `ticker` — Ticker: `npx @lumioui/cli add pro/marquee-ticker`

## Props

### Marquee

| Prop | Type | Notes |
| --- | --- | --- |
| `children` | `React.ReactNode` | — |
| `direction?` | `"left" | "right"` | Scroll direction. Default "left". |
| `speed?` | `number` | Scroll speed in px/sec. Default 48. |
| `spacing?` | `number` | Gap between loop copies in px. Default 32. |
| `pauseOnPress?` | `boolean` | Hold the strip to ease it to a stop; release resumes from where it rested. Default true. |
| `playing?` | `boolean` | Run the loop. Default true. Turning it off coasts the strip to rest. |
| `fadeEdges?` | `boolean` | Gradient fades on both edges. Default true. |
| `fadeWidth?` | `number` | Fade width in px. Default 24. |
| `fadeColor?` | `string` | Fade tint — defaults to the theme card color. |
| `contentClassName?` | `string` | Classes for each content copy's row. |
| `accessibilityLabel?` | `string` | Label announced for the whole strip (role "text"). Tiled loop copies after the first stay hidden, so the content is never read twice. |
| `className?` | `string` | — |

### MarqueeItem

| Prop | Type | Notes |
| --- | --- | --- |
| `className?` | `string` | — |

Source: https://lumioui.com/components/marquee