Marquee

Installation

npx shadcn@latest add @blank/marquee

The install adds the marquee and marquee-vertical keyframes to your stylesheet.

Usage

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

<Marquee pauseOnHover className="[--duration:30s]">
  <span>Accordion</span>
  <span>Calendar</span>
  <span>Command</span>
</Marquee>

The children are drawn repeat times and each copy slides by its own length, so the loop has no seam. Only the first copy reaches screen readers and the tab order; the others are aria-hidden and inert. The loop pauses while the strip is off screen, and under reduced motion it holds still.

Speed, spacing and the edge fade are CSS variables rather than props, so they can change per breakpoint: [--duration:20s], [--gap:2rem], [--fade:5rem].

Examples

Vertical

A vertical marquee needs a height. reverse runs it the other way.

Props