Marquee

ReactVueAngularSvelteAstroNext.js

ReactVueAngularSvelteAstroNext.js

---
import { Marquee, MarqueeContent } from "@/components/ui/marquee"

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

<Marquee class="mask-x-from-95%">
  <MarqueeContent>
    {
      items.map((item) => (
        <span class="text-muted-foreground text-sm">{item}</span>
      ))
    }
  </MarqueeContent>
</Marquee>

Installation

To install the marquee component, run the following command:

npx shadcn@latest add @fulldev/marquee

Usage

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

<Marquee>
  <MarqueeContent>
    <!-- Your content here -->
  </MarqueeContent>
</Marquee>

Examples

Direction

Control the scroll direction with the direction prop.

TypeScriptJavaScriptPythonGoRust

TypeScriptJavaScriptPythonGoRust

TypeScriptJavaScriptPythonGoRust

TypeScriptJavaScriptPythonGoRust

---
import { Marquee, MarqueeContent } from "@/components/ui/marquee"

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

<div class="flex flex-col gap-8">
  <Marquee class="mask-x-from-95%">
    <MarqueeContent direction="left">
      {
        items.map((item) => (
          <span class="text-muted-foreground text-sm">{item}</span>
        ))
      }
    </MarqueeContent>
  </Marquee>

  <Marquee class="mask-x-from-95%">
    <MarqueeContent direction="right">
      {
        items.map((item) => (
          <span class="text-muted-foreground text-sm">{item}</span>
        ))
      }
    </MarqueeContent>
  </Marquee>
</div>

Pause on Hover

Enable pause on hover with the pauseOnHover prop.

Tailwind CSSBootstrapSassPostCSS

Tailwind CSSBootstrapSassPostCSS

---
import { Marquee, MarqueeContent } from "@/components/ui/marquee"

const items = ["Tailwind CSS", "Bootstrap", "Sass", "PostCSS"]
---

<Marquee class="mask-x-from-95%">
  <MarqueeContent pauseOnHover>
    {
      items.map((item) => (
        <span class="text-muted-foreground text-sm">{item}</span>
      ))
    }
  </MarqueeContent>
</Marquee>

Styling

The marquee component supports masking effects to create a fade-out effect at the edges. Use utility classes like mask-x-from-95% to apply the mask.