Marquee

ReactVueAngularSvelteAstroNext.js

---
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

npx shadcn@latest add @fulldev/marquee

Usage

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

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

The marquee duplicates its slot for a seamless loop.

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

Examples

Seamless Loop

ReactVueAngularSvelteAstroNext.js

---
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.

TypeScriptJavaScriptPythonGoRust

---
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.

PlanBuildShipMeasure

---
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.

FastSmoothSteadyLooping

---
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.

Tailwind CSSAstroTypeScriptContent

---
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.

No maskFull edgeSolidContinuous

---
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 for more information on props.

Sidebar

Search