Marquee
An infinite scrolling marquee component for highlighting features, review cards, or other elements.Copy Markdown
Preview
A versatile marquee component that can act as a wrapper around any custom content, typically review cards or feature lists.
Installation
The fastest way to get started is using shadcn CLI:
npx shadcn@latest add @nurav-ui/marqueeOr install via direct URL without registry config:
npx shadcn@latest add https://nurav-ui.vercel.app/r/marquee.jsonThis will automatically install all dependencies (motion, clsx, tailwind-merge) and add the component to your project.
Mask Variants
Variant 2: Marquee Normal
Modern blur effect with soft, frosted-glass appearance. Install from registry:
npx shadcn@latest add @nurav-ui/marquee-v2Or use the direct URL:
npx shadcn@latest add https://nurav-ui.vercel.app/r/marquee-v2.jsonVariant 3: Marquee Perspective
Sharp, defined cutoff with no transition. Perfect for contained layouts. Install from registry:
npx shadcn@latest add @nurav-ui/marquee-v3Or use the direct URL:
npx shadcn@latest add https://nurav-ui.vercel.app/r/marquee-v3.jsonExamples
Vertical Marquee
You can make the marquee scroll vertically by passing the vertical prop. You'll likely need to set a fixed height on the parent container.
<div className="h-100 flex gap-4">
<Marquee vertical pauseOnHover>
{/* your vertical content */}
</Marquee>
<Marquee vertical reverse pauseOnHover>
{/* reverse vertical content */}
</Marquee>
</div>Reverse Direction
Pass the reverse prop to change the scrolling direction from right-to-left to left-to-right (or bottom-to-top to top-to-bottom for vertical).
<Marquee reverse>
{/* elements */}
</Marquee>Varying Speeds
Adjust the duration prop to control how quickly the marquee scrolls. A lower duration results in faster scrolling. The default is 40 (seconds).
<Marquee duration={20}>
{/* fast elements */}
</Marquee>
