Marquee
An infinite scrolling component that can be used to display text, images, or videos.
Vercel
Next.js
React
shadcn/ui
Tailwind CSS
TypeScriptVercelNext.jsReactshadcn/uiTailwind CSSTypeScriptVercelNext.jsReactshadcn/uiTailwind CSSTypeScriptVercelNext.jsReactshadcn/uiTailwind CSSTypeScript
Supabase
Stripe
GitHub
OpenAI
Claude
CursorSupabaseStripeGitHubOpenAIClaudeCursorSupabaseStripeGitHubOpenAIClaudeCursorSupabaseStripeGitHubOpenAIClaudeCursorInstallation
pnpm dlx shadcn@latest add @cortexcn/marqueeThe CLI also adds the animate-marquee and animate-marquee-vertical animations to your globals.css. For a manual install, copy the CSS shown in the Manual tab.
Usage
import { Marquee } from "@/components/marquee";<Marquee pauseOnHover>
<span>Next.js</span>
<span>React</span>
<span>Tailwind CSS</span>
</Marquee>Examples
Two rows
Pair a normal row with a reverse row, then fade the edges with gradients.
VercelNext.jsReactshadcn/uiTailwind CSSTypeScriptVercelNext.jsReactshadcn/uiTailwind CSSTypeScriptVercelNext.jsReactshadcn/uiTailwind CSSTypeScriptVercelNext.jsReactshadcn/uiTailwind CSSTypeScriptSupabaseStripeGitHubOpenAIClaudeCursorSupabaseStripeGitHubOpenAIClaudeCursorSupabaseStripeGitHubOpenAIClaudeCursorSupabaseStripeGitHubOpenAIClaudeCursor<div className="relative flex w-full flex-col overflow-hidden"> <Marquee pauseOnHover className="[--duration:30s]"> {firstRow.map((logo) => ( <LogoCard key={logo.name} {...logo} /> ))} </Marquee> <Marquee reverse pauseOnHover className="[--duration:30s]"> {secondRow.map((logo) => ( <LogoCard key={logo.name} {...logo} /> ))} </Marquee> <div className="pointer-events-none absolute inset-y-0 left-0 w-1/4 bg-linear-to-r from-background" /> <div className="pointer-events-none absolute inset-y-0 right-0 w-1/4 bg-linear-to-l from-background" /></div>Vertical
Set vertical to scroll top to bottom. Give the parent a fixed height.
Open code
Composable
Beautiful defaults
AI-ready
Dark mode
Copy and paste
Open code
Composable
Beautiful defaults
AI-ready
Dark mode
Copy and paste
Open code
Composable
Beautiful defaults
AI-ready
Dark mode
Copy and paste
Open code
Composable
Beautiful defaults
AI-ready
Dark mode
Copy and paste
Open code
Composable
Beautiful defaults
AI-ready
Dark mode
Copy and paste
Open code
Composable
Beautiful defaults
AI-ready
Dark mode
Copy and paste
Open code
Composable
Beautiful defaults
AI-ready
Dark mode
Copy and paste
Open code
Composable
Beautiful defaults
AI-ready
Dark mode
Copy and paste
<div className="relative flex h-72 w-full items-center justify-center gap-4 overflow-hidden"> <Marquee vertical pauseOnHover className="[--duration:20s]"> {features.map((feature) => ( <Card key={feature}>{feature}</Card> ))} </Marquee> <Marquee vertical reverse pauseOnHover className="[--duration:20s]"> {features.map((feature) => ( <Card key={feature}>{feature}</Card> ))} </Marquee></div>Speed and spacing
The marquee reads two CSS variables. Override them with a class:
<Marquee className="[--duration:20s] [--gap:2rem]">{children}</Marquee>| Variable | Default | Description |
|---|---|---|
--duration | 40s | Time for one full loop. Lower is faster. |
--gap | 1rem | Space between items and between repeated sets |
Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | required | Content to scroll |
reverse | boolean | false | Scroll in the opposite direction |
pauseOnHover | boolean | false | Pause the animation while hovered |
vertical | boolean | false | Scroll vertically instead of horizontally |
repeat | number | 4 | How many copies of the content are rendered |
className | string | - | Extra classes, including --duration/--gap |
All other div props are passed to the root element.