Docs / Components / Marquee
Marquee
A marquee component with hover to slow down the animation.
RankFlow UI has completely transformed my workflow. The components are stunning and so easy to customize.
The attention to detail in these animations is next level. It's the premium feel we've been looking for.
Finally, a UI library that doesn't just look good but feels incredibly smooth. Highly recommended!
Building our landing page was a breeze. Our conversion rates improved immediately after switching.
RankFlow UI has completely transformed my workflow. The components are stunning and so easy to customize.
The attention to detail in these animations is next level. It's the premium feel we've been looking for.
Finally, a UI library that doesn't just look good but feels incredibly smooth. Highly recommended!
Building our landing page was a breeze. Our conversion rates improved immediately after switching.
RankFlow UI has completely transformed my workflow. The components are stunning and so easy to customize.
The attention to detail in these animations is next level. It's the premium feel we've been looking for.
Finally, a UI library that doesn't just look good but feels incredibly smooth. Highly recommended!
Building our landing page was a breeze. Our conversion rates improved immediately after switching.
RankFlow UI has completely transformed my workflow. The components are stunning and so easy to customize.
The attention to detail in these animations is next level. It's the premium feel we've been looking for.
Finally, a UI library that doesn't just look good but feels incredibly smooth. Highly recommended!
Building our landing page was a breeze. Our conversion rates improved immediately after switching.
Dependencies
Install the following dependencies to use this component:
1npm install motion clsx tailwind-merge
Installation
Run the following command in your terminal to add the component to your project:
1npx rankflow-ui@latest add marquee
Props Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | - | The content to scroll. |
| direction | left | right | left | The scroll direction. |
| speed | number | 20 | The speed of the animation. |
| pauseOnHover | boolean | true | Whether to pause the animation on hover. |
| className | string | '' | Additional CSS classes. |