Skip to main content
  • Location: sabo/src/components/ui/marquee.tsx

​
Notes

  • If your network blocks iframes or the anchor doesn’t scroll, the embed may show the page top. Use the gallery or record a short clip as a fallback.
  • For static screenshots, prefer cropping a single logo row; for animation, use the embedded preview.

​
When to use

  • Showcase partners/logos or cycle through short text items.
  • Prefer horizontal motion; keep speed comfortable and repeat count modest.

​
Usage

sabo/src/components/ui/marquee.tsx
import { Marquee } from "@/components/ui/marquee";

export function Example() {
  return (
    <Marquee pauseOnHover repeat={3}>
      <span className="px-4 py-1 rounded-full border">OpenAI</span>
      <span className="px-4 py-1 rounded-full border">Vercel</span>
      <span className="px-4 py-1 rounded-full border">Supabase</span>
    </Marquee>
  );
}

​
Key props

​
children
ReactNode
The content items to scroll in the marquee (logos, text, cards, etc.).
​
repeat
number
default:"4"
Number of repeated tracks to avoid gaps.
​
pauseOnHover
boolean
default:"false"
Pause animation while hovering.
​
reverse
boolean
default:"false"
Reverse direction.
​
vertical
boolean
default:"false"
Animate the marquee vertically instead of horizontally.
​
className
string
Additional CSS classes applied to the container div.

​
Styling tip

  • The component includes predefined CSS classes (animate-marquee, animate-marquee-vertical) for common use cases.
  • Customize speed and spacing by overriding CSS variables: --duration (animation duration) and --gap (spacing between items) on the component or root element.