Marquee

Loops a strip of content, with a control to pause it.

TypographyPhotographyEditorialIllustrationMotion

marquee-demo.tsx

"use client";import { Marquee } from "@/components/vip-ui/marquee";const disciplines = [  "Typography",  "Photography",  "Editorial",  "Illustration",  "Motion",];export function MarqueeDemo() {  return (    <Marquee speed={60} className="w-full">      {disciplines.map((discipline, index) => (        <span          key={discipline}          className="inline-flex items-center gap-3 whitespace-nowrap rounded-xl border border-border bg-card px-4 py-3 text-sm font-medium shadow-[var(--shadow-card)]"        >          <span aria-hidden="true" className="font-mono text-xs text-primary">            0{index + 1}          </span>          {discipline}        </span>      ))}    </Marquee>  );}

Installation

CLI

Manual

The CLI adds the files, packages, theme variables, and Tailwind plugin that this component uses. Before you run it, set up your project.

npm

yarn

pnpm

bun

pnpm dlx shadcn@latest add https://vip-ui.dev/r/vip-marquee.json

Reverse

In a right-to-left layout, both directions change sides.

TypographyPhotographyEditorialIllustrationMotion

marquee-reverse-demo.tsx

"use client";import { Marquee } from "@/components/vip-ui/marquee";const disciplines = [  "Typography",  "Photography",  "Editorial",  "Illustration",  "Motion",];export function MarqueeReverseDemo() {  return (    <Marquee reverse speed={60} className="w-full">      {disciplines.map((discipline, index) => (        <span          key={discipline}          className="inline-flex items-center gap-3 whitespace-nowrap rounded-xl border border-border bg-card px-4 py-3 text-sm font-medium shadow-[var(--shadow-card)]"        >          <span aria-hidden="true" className="font-mono text-xs text-primary">            0{index + 1}          </span>          {discipline}        </span>      ))}    </Marquee>  );}

Speed and spacing

Set speed in pixels per second and --marquee-gap for the space between items.

SerifGroteskMonoDisplayScriptSlab

marquee-speed-demo.tsx

"use client";import { Marquee } from "@/components/vip-ui/marquee";const tags = ["Serif", "Grotesk", "Mono", "Display", "Script", "Slab"];export function MarqueeSpeedDemo() {  return (    <Marquee speed={25} className="w-full [--marquee-gap:0.5rem]">      {tags.map((tag) => (        <span          key={tag}          className="whitespace-nowrap rounded-full border border-border bg-card px-3 py-1 text-xs font-medium"        >          {tag}        </span>      ))}    </Marquee>  );}

API reference

speed: number = 50: Movement in pixels per second. Hover, focus, and the built-in button pause it. Set 0 to stop it and wrap the items. Reduced motion does the same.
reverse: boolean = false: Move the content toward the end edge instead of the start edge.
children: ReactNode: Items to loop. Do not put IDs in them, because the copies repeat them. The copies are inert and hidden from assistive technology. A focused item moves into view.
--marquee-gap: CSS length = 1.5rem: Space between items. Set it in className.