# Marquee

> An infinite, edge-faded horizontal scroller for logos, tags or testimonials. Pauses on hover.

- Category: Motion
- Type: component
- License: MIT (free)
- Page: https://niceui.dev/components/marquee

## Installation

```bash
npx shadcn@latest add https://niceui.dev/r/marquee.json
```

Or copy the source below into `components/ui/marquee.tsx`.

## Source

```tsx
import * as React from "react";

export interface MarqueeProps {
  children: React.ReactNode;
  duration?: number;
  pauseOnHover?: boolean;
  className?: string;
}

export function Marquee({ children, duration = 24, pauseOnHover = true, className = "" }: MarqueeProps) {
  return (
    <div
      className={[
        "group w-full overflow-hidden",
        "[mask-image:linear-gradient(90deg,transparent,black_15%,black_85%,transparent)]",
        className,
      ].join(" ")}
    >
      <style>{"@keyframes nice-marquee{to{transform:translateX(calc(-50% - 6px))}}"}</style>
      <div
        className={["flex w-max gap-3", pauseOnHover ? "group-hover:[animation-play-state:paused]" : ""].join(" ")}
        style={{ animation: "nice-marquee " + duration + "s linear infinite" }}
      >
        {children}
        <div aria-hidden className="contents">
          {children}
        </div>
      </div>
    </div>
  );
}
```

## Usage

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

const tags = ["Accordion", "Dialog", "Tooltip", "Sidebar", "Command", "Toast"];

export default function Example() {
  return (
    <Marquee>
      {tags.map((tag) => (
        <span key={tag} className="rounded-lg border border-white/15 px-3.5 py-2 text-sm">
          {tag}
        </span>
      ))}
    </Marquee>
  );
}
```