Navigation: [/sitemap.md](/sitemap.md)

---
type: doc
title: Marquee
description: A continuous scrolling animation component for displaying content in a loop.
---

```astro live props={{ name: 'marquee' }}
---
import { Marquee } from "@/components/ui/marquee"

const items = ["React", "Vue", "Angular", "Svelte", "Astro", "Next.js"]
---

<Marquee>
  {
    items.map((item) => (
      <span class="text-muted-foreground text-sm">{item}</span>
    ))
  }
</Marquee>
```

## Installation

```bash
npx shadcn@latest add @fulldev/marquee
```

## Usage

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

```astro
<Marquee>
  <span>Design systems</span>
  <span>Astro</span>
  <span>Content sites</span>
</Marquee>
```

The marquee duplicates its slot for a seamless loop.

```astro
<Marquee>
  <span>Design systems</span>
  <span>Astro</span>
  <span>Content sites</span>
</Marquee>
```

## Examples

### Seamless Loop

```astro live
---
import { Marquee } from "@/components/ui/marquee"

const items = ["React", "Vue", "Angular", "Svelte", "Astro", "Next.js"]
---

<Marquee>
  {
    items.map((item) => (
      <span class="text-muted-foreground text-sm">{item}</span>
    ))
  }
</Marquee>
```

### Direction

Control the scroll direction with the `direction` prop.

```astro live
---
import { Marquee } from "@/components/ui/marquee"

const items = ["TypeScript", "JavaScript", "Python", "Go", "Rust"]
---

<div class="flex flex-col gap-8">
  <Marquee>
    {
      items.map((item) => (
        <span class="text-muted-foreground text-sm">{item}</span>
      ))
    }
  </Marquee>

  <Marquee direction="right">
    {
      items.map((item) => (
        <span class="text-muted-foreground text-sm">{item}</span>
      ))
    }
  </Marquee>
</div>
```

### Vertical Direction

Use `direction="top"` or `direction="bottom"` for vertical marquee content.

```astro live
---
import { Marquee } from "@/components/ui/marquee"

const items = ["Plan", "Build", "Ship", "Measure"]
---

<div class="grid h-48 grid-cols-2 gap-6">
  <Marquee direction="top">
    {
      items.map((item) => (
        <span class="text-muted-foreground text-sm">{item}</span>
      ))
    }
  </Marquee>

  <Marquee direction="bottom">
    {
      items.map((item) => (
        <span class="text-muted-foreground text-sm">{item}</span>
      ))
    }
  </Marquee>
</div>
```

### Timing

Set the animation duration with the `time` prop. Numbers are treated as seconds.

```astro live
---
import { Marquee } from "@/components/ui/marquee"

const items = ["Fast", "Smooth", "Steady", "Looping"]
---

<Marquee time={12}>
  {
    items.map((item) => (
      <span class="text-muted-foreground text-sm">{item}</span>
    ))
  }
</Marquee>
```

### Pause on Hover

Enable `pauseOnHover` to pause the animation while the marquee is hovered.

```astro live
---
import { Marquee } from "@/components/ui/marquee"

const items = ["Tailwind CSS", "Astro", "TypeScript", "Content"]
---

<Marquee pauseOnHover>
  {
    items.map((item) => (
      <span class="text-muted-foreground text-sm">{item}</span>
    ))
  }
</Marquee>
```

## Styling

Use `variant="solid"` to remove the default edge fade.

```astro live
---
import { Marquee } from "@/components/ui/marquee"

const items = ["No mask", "Full edge", "Solid", "Continuous"]
---

<Marquee variant="solid">
  {
    items.map((item) => (
      <span class="text-muted-foreground text-sm">{item}</span>
    ))
  }
</Marquee>
```

## API Reference

| Prop           | Type                                     | Default      |
| -------------- | ---------------------------------------- | ------------ |
| `direction`    | `"left" \| "right" \| "top" \| "bottom"` | `"left"`     |
| `time`         | `number \| string`                       | `30`         |
| `pauseOnHover` | `boolean`                                | `false`      |
| `variant`      | `"gradient" \| "solid"`                  | `"gradient"` |
| `class`        | `string`                                 | `undefined`  |

See the [GitHub source code](https://github.com/fulldotdev/ui/tree/main/src/components/ui/marquee) for more information on props.