Marquee

Use Marquee for a supplementary repeating strip of short labels or logos that can pause.

Preview

Supported technologies

Display a repeating technology list with localized movement controls.

AccessibilityBase UIReact 19Tailwind 4

Loading preview.

Installation

New to this Registry? Complete the base setup before continuing.

npx shadcn@latest add @neumorphism-ui/marquee

Install the shared base once, then add components and their dependencies with the CLI.

Registry JSON

Usage

Pass the items and name the region and its pause and resume controls. Keep essential information available elsewhere and respect the built-in reduced-motion behavior.

"use client";

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

export default function Example() {
  return <Marquee items={["React", "Base UI", "Tailwind CSS"]} label="Supported technologies" />;
}

API Reference

Duplicates the visual item set for continuous movement while hiding the second copy from assistive technology. Users can pause or resume movement, and prefers-reduced-motion stops the animation automatically.

Component	Prop	Type	Default	Description
`Marquee`	`items`required	`readonly ReactNode[]`	`—`	The items that repeat through the strip.
`Marquee`	`duration`	`number`	`24`	Sets one animation cycle in seconds.
`Marquee`	`defaultPaused`	`boolean`	`false`	Starts the component in a paused state.
`Marquee`	`label`	`string`	`"Scrolling content"`	Names the repeating information region.
`Marquee`	`pauseLabel / resumeLabel`	`string`	`—`	Localizes the accessible names of the motion control button.