React components
Marquee
An infinite scrolling marquee component for showcasing logos or text.
Overview
The Marquee component creates a scrolling container that continuously loops its content. It's often used for displaying partner logos, testimonials, or news tickers. It supports horizontal and vertical scrolling, pausing on hover, and custom speeds.
Usage
import { Marquee } from '@/components/core/marquee';
function Partners() {
return (
<Marquee pauseOnHover className="bg-muted py-4">
<img src="/logo1.png" className="mx-4 h-8" />
<img src="/logo2.png" className="mx-4 h-8" />
<img src="/logo3.png" className="mx-4 h-8" />
</Marquee>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | Required | The content to scroll. |
reverse? | boolean | false | If true, scrolls in the opposite direction. |
pauseOnHover? | boolean | false | Stops animation when the mouse hovers over the marquee. |
vertical? | boolean | false | Scrolls vertically instead of horizontally. |
repeat? | number | 4 | Number of times to repeat the children to create the infinite effect. |
className? | string | - | Optional CSS class names. |