Sections

Utilities

Marquee

Scrolls items in a horizontal container.

Docs API

Sponsor 1

Sponsor 2

Sponsor 3

Sponsor 4

Sponsor 5

Sponsor 6

Sponsor 7

Sponsor 8

Sponsor 9

Sponsor 10

Installation


pnpm dlx shadcn@latest add https://shark.vini.one/r/marquee.json

Usage


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


<Marquee>
  <MarqueeContent>
    <MarqueeItem />
    <MarqueeItem />
    <MarqueeItem />
  </MarqueeContent>
</Marquee>

Accessibility

Enable pause-on-interaction: Use pauseOnInteraction so users can pause the animation on hover or focus, improving accessibility and readability.
Use descriptive labels: Add a meaningful aria-label that describes the marquee content.
Avoid for critical information: Do not use marquees for content users must read. Moving text is hard to process; use static content for important information.

Orientation

Use the orientation prop to control the orientation of the marquee.

Horizontal

Sponsor 1

Sponsor 2

Sponsor 3

Sponsor 4

Sponsor 5

Sponsor 6

Sponsor 7

Sponsor 8

Sponsor 9

Sponsor 10

Vertical

Sponsor 1

Sponsor 2

Sponsor 3

Sponsor 4

Sponsor 5

Sponsor 6

Sponsor 7

Sponsor 8

Sponsor 9

Sponsor 10

Examples

Pause on hover

Use the pauseOnInteraction prop to pause the marquee on hover or focus.

Sponsor 1

Sponsor 2

Sponsor 3

Sponsor 4

Sponsor 5

Sponsor 6

Sponsor 7

Sponsor 8

Sponsor 9

Sponsor 10

Reverse

Use the reverse prop to scroll in the opposite direction.

Sponsor 1

Sponsor 2

Sponsor 3

Sponsor 4

Sponsor 5

Sponsor 6

Sponsor 7

Sponsor 8

Sponsor 9

Sponsor 10

Auto fill

Use the autoFill prop to automatically duplicate content to fill the container.

Sponsor 1

Sponsor 2

Spacing

Use the spacing prop to control the gap between items.

Sponsor 1

Sponsor 2

Sponsor 3

Sponsor 4

Sponsor 5

Sponsor 6

Sponsor 7

Sponsor 8

Sponsor 9

Sponsor 10

Fade

Use the showEdges prop to show or hide the gradient fade at the start and end of the marquee.

Sponsor 1

Sponsor 2

Sponsor 3

Sponsor 4

Sponsor 5

Sponsor 6

Sponsor 7

Sponsor 8

Sponsor 9

Sponsor 10

Sponsor 1

Sponsor 2

Sponsor 3

Sponsor 4

Sponsor 5

Sponsor 6

Sponsor 7

Sponsor 8

Sponsor 9

Sponsor 10

Custom speed

Use the speed prop (pixels per second) to control scroll speed.

Sponsor 1

Sponsor 2

Sponsor 3

Sponsor 4

Sponsor 5

Sponsor 6

Sponsor 7

Sponsor 8

Sponsor 9

Sponsor 10

API Reference

Marquee

Root component. Manages the scrolling viewport and animation.

Prop	Type	Default
`orientation`	`horizontal`, `vertical`	`horizontal`
`speed`	`number` (px/s)	`50`
`spacing`	`string`	`"16px"`
`showEdges`	`boolean`	`true`
`autoFill`	`boolean`	`false`
`pauseOnInteraction`	`boolean`	`false`
`reverse`	`boolean`	`false`
`className`	`string`	-

MarqueeContent

Viewport wrapper. Wrap MarqueeItem children with this. Animates content horizontally.

Prop	Type	Default
`className`	`string`	-
`asChild`	`boolean`	-

MarqueeItem

Single item in the scrolling marquee.

Prop	Type	Default
`className`	`string`	-
`asChild`	`boolean`	-

For a complete list of props, see the Ark UI documentation.

On This Page

Installation Usage Accessibility Orientation Horizontal Vertical Examples Pause on hover Reverse Auto fill Spacing Fade Custom speed API Reference Marquee MarqueeContent MarqueeItem