---
title: Marquee
description: "`Marquee` is a component that continuously scrolls content horizontally or vertically."
links:
  - style: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/marquee/marquee.style.ts
  - source: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/marquee
  - storybook: https://yamada-ui.github.io/yamada-ui?path=/story/components-marquee--basic
---

# Marquee

`Marquee` is a component that continuously scrolls content horizontally or vertically.

```tsx
const items = useMemo(
  () => [
    {
      href: "https://developer.mozilla.org/en-US/docs/Web/JavaScript",
      color: "#f7df1e",
      icon: SiJavascript,
      label: "JavaScript",
    },
    {
      href: "https://www.typescriptlang.org",
      color: "#3178c6",
      icon: SiTypescript,
      label: "TypeScript",
    },
    {
      href: "https://github.com",
      color: "currentColor",
      icon: SiGithub,
      label: "GitHub",
    },
    {
      href: "https://gitlab.com",
      color: "#fc6d26",
      icon: SiGitlab,
      label: "GitLab",
    },
    {
      href: "https://vercel.com",
      color: "currentColor",
      icon: SiVercel,
      label: "Vercel",
    },
    {
      href: "https://react.dev",
      color: "#61dafb",
      icon: SiReact,
      label: "React",
    },
    {
      href: "https://nextjs.org",
      color: "currentColor",
      icon: SiNextdotjs,
      label: "Next.js",
    },
    {
      href: "https://storybook.js.org",
      color: "#ff4785",
      icon: SiStorybook,
      label: "Storybook",
    },
    {
      href: "https://www.figma.com",
      color: "#F24E1E",
      icon: SiFigma,
      label: "Figma",
    },
    {
      href: "https://x.com",
      color: "currentColor",
      icon: SiX,
      label: "X",
    },
  ],
  [],
)

return (
  <Marquee.Root aria-label="Brand logos" gap="xl">
    {items.map(({ color, icon, label }) => (
      <Marquee.Item key={label} px="xl" py="sm">
        <Icon
          as={icon}
          aria-hidden={false}
          aria-label={label}
          color={color}
          fontSize="6xl"
        />
      </Marquee.Item>
    ))}
  </Marquee.Root>
)
```

## Usage

```tsx
import { Marquee } from "@yamada-ui/react"
```

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

```tsx
import { Marquee } from "@workspaces/ui"
```

```tsx
<Marquee.Root>
  <Marquee.Edge direction="start" />
  <Marquee.Content>
    <Marquee.Item />
  </Marquee.Content>
  <Marquee.Edge direction="end" />
</Marquee.Root>
```

:::note
`Marquee.Content` can be omitted.
:::

### Change Direction

To change the direction, set `orientation` to `"horizontal"` or `"vertical"`. By default, `"horizontal"` is set.

```tsx preview
<VStack>
  <For each={["horizontal", "vertical"]}>
    {(orientation, key) => (
      <Marquee.Root
        key={key}
        aria-label={`${orientation} brand logos`}
        contain="inline-size"
        gap="xl"
        h={orientation === "vertical" ? "xl" : undefined}
        orientation={orientation}
      >
        {marqueeItems.map(({ color, icon, label }) => (
          <Marquee.Item
            key={label}
            px={orientation === "vertical" ? "sm" : "xl"}
            py={orientation === "vertical" ? "xl" : "sm"}
          >
            <Icon
              as={icon}
              aria-hidden={false}
              aria-label={label}
              color={color}
              fontSize="6xl"
            />
          </Marquee.Item>
        ))}
      </Marquee.Root>
    )}
  </For>
</VStack>
```

### Change Scroll Direction

To change the scrolling direction, set `direction` to `"start"` or `"end"`. By default, `"start"` is set.

```tsx preview
<VStack>
  <For each={["start", "end"]}>
    {(direction, key) => (
      <Marquee.Root
        key={key}
        aria-label={`Brand logos moving toward ${direction}`}
        contain="inline-size"
        direction={direction}
        gap="xl"
      >
        {marqueeItems.map(({ color, icon, label }) => (
          <Marquee.Item key={label} px="xl" py="sm">
            <Icon
              as={icon}
              aria-hidden={false}
              aria-label={label}
              color={color}
              fontSize="6xl"
            />
          </Marquee.Item>
        ))}
      </Marquee.Root>
    )}
  </For>
</VStack>
```

### Reverse Scroll Direction

To reverse the scrolling direction, set `reverse` to `true`.

```tsx
<Marquee.Root aria-label="Brand logos" gap="xl" reverse>
  {marqueeItems.map(({ color, icon, label }) => (
    <Marquee.Item key={label} px="xl" py="sm">
      <Icon
        as={icon}
        aria-hidden={false}
        aria-label={label}
        color={color}
        fontSize="6xl"
      />
    </Marquee.Item>
  ))}
</Marquee.Root>
```

### Change Speed

To change the scrolling speed, set a numerical value (pixels per second) to `speed`. By default, `50` is set.

```tsx preview
<VStack>
  <For each={[25, 50, 100]}>
    {(speed, key) => (
      <Marquee.Root
        key={key}
        aria-label={`Brand logos at ${speed} pixels per second`}
        contain="inline-size"
        gap="xl"
        speed={speed}
      >
        {marqueeItems.map(({ color, icon, label }) => (
          <Marquee.Item key={label} px="xl" py="sm">
            <Icon
              as={icon}
              aria-hidden={false}
              aria-label={label}
              color={color}
              fontSize="6xl"
            />
          </Marquee.Item>
        ))}
      </Marquee.Root>
    )}
  </For>
</VStack>
```

### Change Duration

To change the duration, set a numerical value (seconds) to `duration`. When set, `duration` takes precedence over `speed`.

```tsx
<Marquee.Root aria-label="Brand logos" duration={10} gap="xl">
  {marqueeItems.map(({ color, icon, label }) => (
    <Marquee.Item key={label} px="xl" py="sm">
      <Icon
        as={icon}
        aria-hidden={false}
        aria-label={label}
        color={color}
        fontSize="6xl"
      />
    </Marquee.Item>
  ))}
</Marquee.Root>
```

### Delay

To delay the start of the animation, set a numerical value (seconds) to `delay`.

```tsx
<Marquee.Root aria-label="Brand logos" delay={2} gap="xl">
  {marqueeItems.map(({ color, icon, label }) => (
    <Marquee.Item key={label} px="xl" py="sm">
      <Icon
        as={icon}
        aria-hidden={false}
        aria-label={label}
        color={color}
        fontSize="6xl"
      />
    </Marquee.Item>
  ))}
</Marquee.Root>
```

### Change Loop Count

To change the loop count, set `loopCount` to a numerical value.

```tsx
<Marquee.Root
  aria-label="Brand logos scrolling three times"
  gap="xl"
  loopCount={3}
>
  {marqueeItems.map(({ color, icon, label }) => (
    <Marquee.Item key={label} px="xl" py="sm">
      <Icon
        as={icon}
        aria-hidden={false}
        aria-label={label}
        color={color}
        fontSize="6xl"
      />
    </Marquee.Item>
  ))}
</Marquee.Root>
```

### Pause on Hover

To pause on hover, set `pauseOnHover` to `true`.

```tsx
<Marquee.Root aria-label="Brand links" gap="xl" pauseOnHover>
  {marqueeItems.map(({ href, color, icon, label }) => (
    <Marquee.Item key={label} px="xl" py="sm">
      <Button
        as="a"
        href={href}
        variant="ghost"
        aria-label={label}
        color={color}
        h="auto"
        px="2rem"
        py="2"
      >
        <Icon as={icon} fontSize="6xl" />
      </Button>
    </Marquee.Item>
  ))}
</Marquee.Root>
```

### Pause on Focus

To pause on focus, set `pauseOnFocus` to `true`.

```tsx
<Marquee.Root aria-label="Brand links" gap="xl" pauseOnFocus>
  {marqueeItems.map(({ href, color, icon, label }) => (
    <Marquee.Item key={label} px="xl" py="sm">
      <Button
        as="a"
        href={href}
        variant="ghost"
        aria-label={label}
        color={color}
        h="auto"
        px="2rem"
        py="2"
      >
        <Icon as={icon} fontSize="6xl" />
      </Button>
    </Marquee.Item>
  ))}
</Marquee.Root>
```

### Add Edge Gradients

To add edge gradients, use `Marquee.Edge`.

```tsx
<Marquee.Root
  aria-label="Brand logos with gradient edges"
  gap="xl"
  rounded="l2"
>
  <Marquee.Edge direction="start" />
  <Marquee.Content>
    {marqueeItems.map(({ color, icon, label }) => (
      <Marquee.Item key={label} px="xl" py="sm">
        <Icon
          as={icon}
          aria-hidden={false}
          aria-label={label}
          color={color}
          fontSize="6xl"
        />
      </Marquee.Item>
    ))}
  </Marquee.Content>
  <Marquee.Edge direction="end" />
</Marquee.Root>
```

### Control

```tsx
const [paused, setPaused] = useState(false)

return (
  <VStack alignItems="start">
    <Marquee.Root aria-label="Controlled brand logos" gap="xl" paused={paused}>
      {marqueeItems.map(({ color, icon, label }) => (
        <Marquee.Item key={label} px="xl" py="sm">
          <Icon
            as={icon}
            aria-hidden={false}
            aria-label={label}
            color={color}
            fontSize="6xl"
          />
        </Marquee.Item>
      ))}
    </Marquee.Root>

    <Button
      startIcon={paused ? <PlayIcon /> : <PauseIcon />}
      onClick={() => setPaused((prev) => !prev)}
    >
      {paused ? "Resume" : "Pause"}
    </Button>
  </VStack>
)
```

```tsx
const controlRef = useRef<Marquee.Control>(null)

return (
  <VStack>
    <Marquee.Root
      aria-label="Brand logos with imperative controls"
      controlRef={controlRef}
      gap="xl"
    >
      {marqueeItems.map(({ color, icon, label }) => (
        <Marquee.Item key={label} px="xl" py="sm">
          <Icon
            as={icon}
            aria-hidden={false}
            aria-label={label}
            color={color}
            fontSize="6xl"
          />
        </Marquee.Item>
      ))}
    </Marquee.Root>

    <Wrap gap="md">
      <Button onClick={() => controlRef.current?.pause()}>Pause</Button>
      <Button onClick={() => controlRef.current?.resume()}>Resume</Button>
      <Button onClick={() => controlRef.current?.togglePause()}>
        Toggle pause
      </Button>
      <Button onClick={() => controlRef.current?.restart()}>Restart</Button>
    </Wrap>
  </VStack>
)
```

## Props

### Marquee.Root

| Prop             | Default        | Type                                                                                                                                                                        | Description                                                                |
| ---------------- | -------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------- |
| `as`             | -              | `As`                                                                                                                                                                        | The HTML element to render.                                                |
| `asChild`        | -              | `boolean`                                                                                                                                                                   | Merges its props onto its immediate child.                                 |
| `css`            | -              | `CSSObject \| CSSObject[]`                                                                                                                                                  | The CSS object.                                                            |
| `colorScheme`    | -              | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...`                                                   | Set color scheme variables.                                                |
| `contentProps`   | -              | `MarqueeContentProps`                                                                                                                                                       | Props for content component.                                               |
| `controlRef`     | -              | `RefObject<MarqueeControl \| null>`                                                                                                                                         | Ref of the marquee controls.                                               |
| `defaultPaused`  | `false`        | `boolean`                                                                                                                                                                   | Whether the marquee is initially paused.                                   |
| `delay`          | `0`            | `number`                                                                                                                                                                    | The delay before the animation starts, in seconds.                         |
| `direction`      | `"start"`      | `SimpleDirection`                                                                                                                                                           | The direction the content scrolls towards.                                 |
| `duration`       | -              | `number`                                                                                                                                                                    | The duration of one loop in seconds. Overrides `speed`.                    |
| `edgeColor`      | `"bg"`         | `"-moz-initial" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" ...` | The color of the edge gradient.                                            |
| `edgeSize`       | `"20%"`        | `"-moz-fit-content" \| "-moz-initial" \| "-moz-max-content" \| "-moz-min-content" \| "-webkit-fit-content" \| "-webkit-max-content" \| "0.5" \| "1.5" \| "1" \| "1/12" ...` | The size of the edge gradient.                                             |
| `loopCount`      | `0`            | `number`                                                                                                                                                                    | The number of animation loops. Set to `0` for infinite loops.              |
| `onComplete`     | -              | `() => void`                                                                                                                                                                | The callback invoked when all finite loops finish.                         |
| `onLoopComplete` | -              | `() => void`                                                                                                                                                                | The callback invoked after each animation iteration, except the final one. |
| `onPauseChange`  | -              | `(paused: boolean) => void`                                                                                                                                                 | The callback invoked when the persistent pause state changes.              |
| `orientation`    | `"horizontal"` | `Orientation`                                                                                                                                                               | The orientation of the marquee.                                            |
| `paused`         | `false`        | `boolean`                                                                                                                                                                   | If `true`, the animation is paused.                                        |
| `pauseOnFocus`   | `false`        | `boolean`                                                                                                                                                                   | If `true`, the animation pauses while an item is focused.                  |
| `pauseOnHover`   | `false`        | `boolean`                                                                                                                                                                   | If `true`, the animation pauses on hover.                                  |
| `reverse`        | `false`        | `boolean`                                                                                                                                                                   | If `true`, the scrolling direction is reversed.                            |
| `speed`          | `50`           | `number`                                                                                                                                                                    | The scrolling speed in pixels per second.                                  |

### Marquee.Content

| Prop          | Default | Type                                                                                                                      | Description                                |
| ------------- | ------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ |
| `as`          | -       | `As`                                                                                                                      | The HTML element to render.                |
| `asChild`     | -       | `boolean`                                                                                                                 | Merges its props onto its immediate child. |
| `css`         | -       | `CSSObject \| CSSObject[]`                                                                                                | The CSS object.                            |
| `colorScheme` | -       | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables.                |

### Marquee.Edge

| Prop          | Default   | Type                                                                                                                      | Description                                            |
| ------------- | --------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------ |
| `as`          | -         | `As`                                                                                                                      | The HTML element to render.                            |
| `asChild`     | -         | `boolean`                                                                                                                 | Merges its props onto its immediate child.             |
| `css`         | -         | `CSSObject \| CSSObject[]`                                                                                                | The CSS object.                                        |
| `colorScheme` | -         | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables.                            |
| `direction`   | `"start"` | `SimpleDirection`                                                                                                         | The edge to fade, relative to the marquee orientation. |

### Marquee.Item

| Prop          | Default | Type                                                                                                                      | Description                                |
| ------------- | ------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ |
| `as`          | -       | `As`                                                                                                                      | The HTML element to render.                |
| `asChild`     | -       | `boolean`                                                                                                                 | Merges its props onto its immediate child. |
| `css`         | -       | `CSSObject \| CSSObject[]`                                                                                                | The CSS object.                            |
| `colorScheme` | -       | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables.                |

## Accessibility

When `aria-label` or `aria-labelledby` is set, it will be read aloud by screen readers.

```tsx
<Marquee.Root aria-label="Technologies">
  <Marquee.Item>Yamada UI</Marquee.Item>
  <Marquee.Item>React</Marquee.Item>
  <Marquee.Item>TypeScript</Marquee.Item>
</Marquee.Root>
```

For interactive content, set `pauseOnFocus` to `true` so keyboard users can access each item.

### Keyboard Navigation

| Key     | Description                                          | State |
| ------- | ---------------------------------------------------- | ----- |
| `Space` | Toggles pause and resume when the element has focus. | -     |

### ARIA Roles and Attributes

| Element                             | Roles and Attributes             | Usage                                                 |
| ----------------------------------- | -------------------------------- | ----------------------------------------------------- |
| `div.ui-marquee__root`              | `role="region"`                  | Indicates that this is a region.                      |
|                                     | `aria-roledescription="marquee"` | Indicates that this is a marquee.                     |
|                                     | `aria-live="off"`                | Prevents repeated announcements of scrolling content. |
|                                     | `aria-keyshortcuts="Space"`      | Indicates the keyboard shortcut to toggle pause.      |
| `div.ui-marquee__group[data-clone]` | `aria-hidden="true"`             | Hides duplicated content from screen readers.         |
|                                     | `inert`                          | Excludes duplicated content from keyboard navigation. |
| `div.ui-marquee__edge`              | `aria-hidden="true"`             | Hides decorative gradients from screen readers.       |

## Similar Components

- [Carousel](https://yamada-ui.com/docs/components/carousel.md): `Carousel` is a component that displays multiple elements like a slideshow.
- [ScrollArea](https://yamada-ui.com/docs/components/scroll-area.md): `ScrollArea` is a component that displays a customized scrollbar.