Marquee
Click or drag the marquee to interact with it
Installation
pnpm dlx shadcn@latest add "https://nuvyxui.vercel.app/r/marquee.json"
Examples
Horizontal Marquee
Reversed Marquee
Usage
import { Marquee } from "@/components/ui/marquee";export default function MyComponent() {
return (
<Marquee>
{/* Your marquee content goes here */}
<div className="px-4">Content Item 1</div>
<div className="px-4">Content Item 2</div>
<div className="px-4">Content Item 3</div>
</Marquee>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | undefined | Content to be displayed in the marquee |
gap | number | 16 | Space between repeated content in pixels |
speed | number | 100 | Animation speed (higher is faster) |
speedOnHover | number | undefined | Animation speed when hovered (higher is faster) |
direction | "horizontal" | "vertical" | "horizontal" | Scrolling direction |
reverse | boolean | false | Reverse the animation direction |
className | string | undefined | Additional CSS classes to apply |
fadeEdges | boolean | false | Fade the edges of the marquee content |
fadeWidth | number | 64 | Width of the edge fade in pixels |
pauseOnTap | boolean | true | Pause animation when clicked |
draggable | boolean | true | Allow dragging interaction with the marquee |