Marquee
CSS-only infinite marquee with faded edges. It pauses on hover and stops for reduced motion.
- Category: Display
- Licence: Free, MIT
- Built with: React 19, Tailwind CSS 4, Motion
- Dependencies: motion, clsx, tailwind-merge
Examples
Marquee
API reference
| Prop | Type | Default | Description |
|---|---|---|---|
duration | number | 30 | Seconds per loop. |
reverse | boolean | false | |
vertical | boolean | false | |
pauseOnHover | boolean | true | |
gap | string | "2rem" |
About Marquee
Marquee scrolls its children in an endless loop with faded edges, pausing on hover so people can read. It is pure CSS, so it costs nothing to run.
Marquee is a display component for React 19, styled with Tailwind CSS 4 and animated with Motion. It drops into Next.js, Vite, Remix or Astro through the shadcn CLI as a single file you own.
When to use Marquee
- Logo clouds and social proof.
- Testimonial strips.
- Announcement bars.
- Tag and keyword rows.
How it works
Content is duplicated and translated by exactly one copy's width per cycle, so the loop has no seam. Duration and gap are props, vertical works too, and reduced motion stops it.
Interactive parts are buttons or links with accessible names, decorative layers are hidden from assistive tech, and everything is reachable by keyboard. With prefers-reduced-motion on, it holds still or settles instantly instead of animating.
Customizing Marquee
Every prop is documented in the API reference above with its type and default. The ones you will reach for first are listed here.
The Customize panel next to the preview lets you change duration, gap, pauseOnHover live, and the Code tab updates to match, so the snippet you copy already carries your values.
- duration (number, default 30): Seconds per loop.
- reverse (boolean, default false).
- vertical (boolean, default false).
- pauseOnHover (boolean, default true).
- gap (string, default "2rem").
Goes well with Marquee
Marquee is already composed into 4 ready-made sections, so you can see it in context or install the whole block.
- Hero Showcase: Hero section
- Hero Gallery: Hero section
- Testimonials Marquee: Testimonials section
- Logo Cloud: Social proof section
- Accordion: An animated React accordion: height springs open, the chevron flips, content fades in
- Number Ticker: An animated React number ticker: each digit rolls on its own wheel
- Avatar Group: Overlapping React avatars that fan apart on hover with names that spring up
- Theme Toggle: A React dark mode toggle: the sun eclipses into a moon and the theme spreads out
- Copy Button: A React copy button whose icon blurs into a drawn check, then swaps back
Install Marquee
npx shadcn@latest add https://charcoalui.com/r/marquee.jsonMarquee is free and MIT licensed. The command copies marquee.tsx into components/ui and installs clsx, tailwind-merge; you can also copy the source from the Code tab by hand.
It pairs well with Velocity Marquee, a Pro piece: Big text drifting sideways that speeds up with your scroll and flips direction when you scroll back.
Frequently asked questions
- How do I install Marquee?
- Run npx shadcn@latest add https://charcoalui.com/r/marquee.json. The shadcn CLI copies marquee.tsx into components/ui and installs motion, clsx, tailwind-merge. You can also copy the source from this page by hand.
- Is Marquee free for commercial use?
- Yes. Marquee is MIT licensed: use it in any personal or commercial project and change it however you like.
- Does Marquee work with Next.js?
- Yes. It is a client component for React 19 styled with Tailwind CSS 4, so it works in the Next.js App Router and Pages Router, Vite, Remix and Astro.
- Can an AI coding agent install Marquee?
- Yes. Connect the Charcoal UI MCP server (https://charcoalui.com/mcp) to Claude Code, Cursor or any MCP client; get_component returns Marquee's props and source and get_install_command returns the exact command.