> ## Documentation Index
> Fetch the complete documentation index at: https://docs.getsabo.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Marquee

> Horizontal scrolling marquee for logos or cards.

* **Location**: `sabo/src/components/ui/marquee.tsx`

<Frame>
  <div className="rounded-xl" style={{ overflow: "hidden", border: "1px solid #e5e7eb" }}>
    <iframe
      className="w-full"
      style={{ height: "160px" }}
      title="Marquee live demo"
      loading="lazy"
      scrolling="no"
      srcDoc={`<!doctype html><html><head><meta charset='utf-8'/><meta name='viewport' content='width=device-width,initial-scale=1'/><style>
:root{--bg:#ffffff;--fg:#111827;--muted:#e5e7eb}
*{box-sizing:border-box}body{margin:0;background:#ffffff;font-family:ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue','Noto Sans','Apple Color Emoji','Segoe UI Emoji'}
.wrapper{overflow:hidden;height:140px;display:flex;align-items:center;justify-content:flex-start;padding:0 12px;background:#ffffff}
.track{display:flex;gap:16px;animation:scroll 18s linear infinite;will-change:transform}
.item{white-space:nowrap;border:1px solid var(--muted);padding:8px 14px;border-radius:9999px;background:#ffffff;color:var(--fg);font-weight:500}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
</style></head><body>
<div class='wrapper'>
  <div class='track'>
    <div class='item'>OpenAI</div>
    <div class='item'>Anthropic</div>
    <div class='item'>Vercel</div>
    <div class='item'>Supabase</div>
    <div class='item'>Stripe</div>
    <div class='item'>Resend</div>
    <div class='item'>PostHog</div>
    <div class='item'>Mintlify</div>
    <div class='item'>OpenAI</div>
    <div class='item'>Anthropic</div>
    <div class='item'>Vercel</div>
    <div class='item'>Supabase</div>
  </div>
</div>
</body></html>`}
    />
  </div>
</Frame>

### 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

```tsx sabo/src/components/ui/marquee.tsx theme={null}
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

<ParamField path="children" type="ReactNode">
  The content items to scroll in the marquee (logos, text, cards, etc.).
</ParamField>

<ParamField path="repeat" type="number" default="4">
  Number of repeated tracks to avoid gaps.
</ParamField>

<ParamField path="pauseOnHover" type="boolean" default="false">
  Pause animation while hovering.
</ParamField>

<ParamField path="reverse" type="boolean" default="false">
  Reverse direction.
</ParamField>

<ParamField path="vertical" type="boolean" default="false">
  Animate the marquee vertically instead of horizontally.
</ParamField>

<ParamField path="className" type="string">
  Additional CSS classes applied to the container div.
</ParamField>

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