Marquee

Scrolls items in a horizontal container.

Installation


pnpm dlx shadcn@latest add @shark/marquee


Marquee
├── MarqueeContent
    └── MarqueeItem


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


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

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

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

Use the reverse prop to scroll in the opposite direction.

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

Use the spacing prop to control the gap between items.

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

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

Root component. Manages the scrolling viewport and animation.

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

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

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