Marquee
An infinite scrolling component for text or images.
Preview
Google
Microsoft
Apple
Amazon
Netflix
Meta
Google
Microsoft
Apple
Amazon
Netflix
Meta
Google
Microsoft
Apple
Amazon
Netflix
Meta
Google
Microsoft
Apple
Amazon
Netflix
Meta
Next.js
React
TypeScript
TailwindCSS
Framer Motion
Vite
Next.js
React
TypeScript
TailwindCSS
Framer Motion
Vite
Next.js
React
TypeScript
TailwindCSS
Framer Motion
Vite
Next.js
React
TypeScript
TailwindCSS
Framer Motion
Vite
Installation
bash
npx auralix-ui add marqueeUsage
Horizontal Marquee
tsx
import { Marquee } from "@/components/ui/Marquee";
<Marquee className="[--duration:20s]">
{/* content */}
</Marquee>Props
| Name | Type | Default | Description |
|---|---|---|---|
reverse | boolean | false | Reverse direction. |
pauseOnHover | boolean | false | Pause animation on hover. |
vertical | boolean | false | Vertical scrolling. |
repeat | number | 4 | Number of repeats. |
Variants
Horizontal (Default)
Next.js
React
Vue
Nuxt
Svelte
Next.js
React
Vue
Nuxt
Svelte
Next.js
React
Vue
Nuxt
Svelte
Next.js
React
Vue
Nuxt
Svelte
Vertical
Aural
UI
Is
Awesome
For
Web
Aural
UI
Is
Awesome
For
Web
Aural
UI
Is
Awesome
For
Web
Aural
UI
Is
Awesome
For
Web
Reverse
1
2
3
4
5
6
1
2
3
4
5
6
1
2
3
4
5
6
1
2
3
4
5
6
On this page