Marquee

Dinner booked for Friday

Replied to the landlord

Groceries arrive at 6pm

Flight to Tokyo held

Flowers sent to Mum

Renewal cancelled

Dinner booked for Friday

Replied to the landlord

Groceries arrive at 6pm

Flight to Tokyo held

Flowers sent to Mum

Renewal cancelled

Installation

pnpm dlx shadcn@latest add @paneui/marquee

Usage

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

<Marquee>
  <span>Dinner booked for Friday</span>
  <span>Flight to Tokyo held</span>
</Marquee>

Examples

Vertical

Without Fade

Repeat

Accessibility

Only the first copy of the content is exposed; the repeats are aria-hidden and inert. By default the loop pauses on hover and while anything inside has keyboard focus.

Motion

Under prefers-reduced-motion: reduce the track is paused in place.

API Reference

Loops its children endlessly along one axis with a CSS animation. Also accepts every prop of div.

direction= "left": "left" | "right" | "up" | "down"; Scroll direction.
duration= 30: number; Seconds for one full loop of the content.
gap= "1rem": string; Space between items (any CSS length).
pauseOnHover= true: boolean; Pause while hovered or while something inside has focus.
fade= true: boolean; Fade the leading and trailing edges with a mask.
repeat= 2: number; Copies of the content in the track (minimum 2).

Prop	Type	Default	Description
direction	"left" \| "right" \| "up" \| "down"	"left"	Scroll direction.
duration	number	30	Seconds for one full loop of the content.
gap	string	"1rem"	Space between items (any CSS length).
pauseOnHover	boolean	true	Pause while hovered or while something inside has focus.
fade	boolean	true	Fade the leading and trailing edges with a mask.
repeat	number	2	Copies of the content in the track (minimum 2).

data-orientation: "horizontal" or "vertical", from direction.
data-slot: "marquee" on the root (unclipped, so a border or ring on it stays visible), "marquee-viewport" on the inner element that clips and fades, "marquee-track" on each copy.

Data attribute	Description
data-orientation	"horizontal" or "vertical", from `direction`.
data-slot	"marquee" on the root (unclipped, so a border or ring on it stays visible), "marquee-viewport" on the inner element that clips and fades, "marquee-track" on each copy.