Marquee

Horizontal scrolling marquee for logos or cards.

• 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.