Signature / Moleculestable

Marquee

Infinite horizontal or vertical scrolling content with pause-on-hover support.

@glinui/uiComponent: marquee

Installation$

pnpm add @glinui/ui @glinui/tokens

Registry$

pnpm dlx @glinui/cli@latest add marquee

Usage$

Place any elements as children. The marquee duplicates them to create a seamless infinite scroll loop.

Basic$

ReactNext.jsTailwindRadixTypeScriptVitest

TSX

1import { Marquee, Badge } from "@glinui/ui"
2
3export function MarqueeDemo() {
4return (
5  <Marquee className="py-4" gap={24}>
6    {["React", "Next.js", "Tailwind", "Radix", "TypeScript", "Vitest"].map((t) => (
7      <Badge key={t} variant="glass" className="mx-2 text-sm">{t}</Badge>
8    ))}
9  </Marquee>
10)
11}

Examples$

Vertical$

AlphaBetaGammaDeltaEpsilon

TSX

1import { Marquee, Badge } from "@glinui/ui"
2
3export function MarqueeVerticalDemo() {
4return (
5  <div className="h-48 overflow-hidden">
6    <Marquee direction="up" speed={20} gap={16}>
7      {["Alpha", "Beta", "Gamma", "Delta", "Epsilon"].map((t) => (
8        <Badge key={t} variant="outline" className="my-1">{t}</Badge>
9      ))}
10    </Marquee>
11  </div>
12)
13}

Pause on Hover$

Hovertopausethescroll

TSX

1import { Marquee, Badge } from "@glinui/ui"
2
3export function MarqueePauseDemo() {
4return (
5  <Marquee pauseOnHover speed={15} gap={24}>
6    {["Hover", "to", "pause", "the", "scroll"].map((t) => (
7      <Badge key={t} className="mx-2">{t}</Badge>
8    ))}
9  </Marquee>
10)
11}

Accessibility$

The duplicated children are marked aria-hidden to prevent screen readers from reading content twice.
Avoid placing interactive elements inside the marquee.

Reduced Motion$

Animation uses motion-safe:animate-marquee-x/y. Under prefers-reduced-motion, the content stays static.

API Reference$

Prop	Type	Required	Default	Description
`direction`	`"left" \| "right" \| "up" \| "down"`	No	`"left"`	Auto-generated from TypeScript source.
`gap`	`number`	No	`16`	Auto-generated from TypeScript source.
`pauseOnHover`	`boolean`	No	`false`	Auto-generated from TypeScript source.
`reverse`	`boolean`	No	`false`	Auto-generated from TypeScript source.
`speed`	`number`	No	`30`	Auto-generated from TypeScript source.

Source$

TSX

1import { Marquee } from "@glinui/ui"

packages/ui/src/components/marquee.tsx

Generated API Snapshot

Beta

Auto-extracted from TypeScript source in packages/ui/src/components/marquee.tsx. This section is in beta and may lag behind hand-curated docs. Regenerate with pnpm --filter @glinui/docs api:generate.

Generated: 2026-02-19T17:59:28.468Z · Full index: /docs/api-metadata

Primary Props Type

MarqueeProps

`MarqueeProps`

Prop	Type	Required	Default	Description
`direction`	`"left" \| "right" \| "up" \| "down"`	No	`"left"`	-
`gap`	`number`	No	`16`	-
`pauseOnHover`	`boolean`	No	`false`	-
`reverse`	`boolean`	No	`false`	-
`speed`	`number`	No	`30`	-