# Marquee

<div class="not-content sl-bejamas-component-preview flex justify-center px-4 md:px-10 py-12 border border-border rounded-t-lg min-h-72 items-center">
<Marquee class="dark:invert"> <img src="/demo/logo/sonos.svg" alt="Netflix" class="h-5 self-center mx-10"/> <img src="/demo/logo/uber.svg" alt="Uber" class="h-5 self-center mx-10"/> <img src="/demo/logo/visa.svg" alt="Visa" class="h-5 self-center mx-10"/> <img src="/demo/logo/coca-cola.svg" alt="Coca-Cola" class="h-6 self-center mx-10"/> <img src="/demo/logo/nike.svg" alt="Nike" class="h-5 self-center mx-10"/> </Marquee>
</div>

```astro
---
---

<Marquee class="dark:invert">
  <img src="/demo/logo/sonos.svg" alt="Netflix" class="h-5 self-center mx-10"/>
  <img src="/demo/logo/uber.svg" alt="Uber" class="h-5 self-center mx-10"/>
  <img src="/demo/logo/visa.svg" alt="Visa" class="h-5 self-center mx-10"/>
  <img src="/demo/logo/coca-cola.svg" alt="Coca-Cola" class="h-6 self-center mx-10"/>
  <img src="/demo/logo/nike.svg" alt="Nike" class="h-5 self-center mx-10"/>
</Marquee>
```

## Installation

<DocsTabs syncKey="pkg">
  <DocsTabItem label="bun">
  ```bash
  bunx bejamas add marquee
  ```
  </DocsTabItem>
  <DocsTabItem label="npm">
  ```bash
  npx bejamas add marquee
  ```
  </DocsTabItem>
  <DocsTabItem label="pnpm">
  ```bash
  pnpm dlx bejamas add marquee
  ```
  </DocsTabItem>
  <DocsTabItem label="yarn">
  ```bash
  yarn dlx bejamas add marquee
  ```
  </DocsTabItem>
</DocsTabs>

## Usage

```astro nocollapse
---
---
<Marquee>
  <!-- Your content here -->
</Marquee>
```

## Props

| Prop | Type | Default |
|---|---|---|
| <code>direction</code> | `"left" \| "right" \| "top" \| "bottom"` | `"left"` |
| <code>time</code> | `number \| string` | `30` |
| <code>variant</code> | `"gradient" \| "solid"` | `"gradient"` |
| <code>class</code> | `string` | `""` |

## Examples

### Direction

<div class="not-content sl-bejamas-component-preview flex justify-center px-4 md:px-10 py-12 border border-border rounded-t-lg min-h-72 items-center">
<div class="flex gap-6 h-60"> <Marquee class="[&_.marquee-content]:space-y-8 space-y-8" direction="top"> <div class="bg-muted px-10 py-7 rounded-lg flex items-center justify-center"><img src="/demo/logo/sonos.svg" alt="Sonos" class="h-5 self-center mx-10 dark:invert"/></div> <div class="bg-muted px-10 py-7 rounded-lg flex items-center justify-center"><img src="/demo/logo/uber.svg" alt="Uber" class="h-5 self-center mx-10 dark:invert"/></div> <div class="bg-muted px-10 py-7 rounded-lg flex items-center justify-center"><img src="/demo/logo/visa.svg" alt="Visa" class="h-5 self-center mx-10 dark:invert"/></div> <div class="bg-muted px-10 py-7 rounded-lg flex items-center justify-center"><img src="/demo/logo/coca-cola.svg" alt="Coca-Cola" class="h-6 self-center mx-10 dark:invert"/></div> <div class="bg-muted px-10 py-7 rounded-lg flex items-center justify-center"><img src="/demo/logo/nike.svg" alt="Nike" class="h-5 self-center mx-10 dark:invert"/></div> </Marquee> <Marquee class="[&_.marquee-content]:space-y-8 space-y-8" direction="bottom"> <div class="bg-muted px-10 py-7 rounded-lg flex items-center justify-center"><img src="/demo/logo/sonos.svg" alt="Sonos" class="h-5 self-center mx-10 dark:invert"/></div> <div class="bg-muted px-10 py-7 rounded-lg flex items-center justify-center"><img src="/demo/logo/uber.svg" alt="Uber" class="h-5 self-center mx-10 dark:invert"/></div> <div class="bg-muted px-10 py-7 rounded-lg flex items-center justify-center"><img src="/demo/logo/visa.svg" alt="Visa" class="h-5 self-center mx-10 dark:invert"/></div> <div class="bg-muted px-10 py-7 rounded-lg flex items-center justify-center"><img src="/demo/logo/coca-cola.svg" alt="Coca-Cola" class="h-6 self-center mx-10 dark:invert"/></div> <div class="bg-muted px-10 py-7 rounded-lg flex items-center justify-center"><img src="/demo/logo/nike.svg" alt="Nike" class="h-5 self-center mx-10 dark:invert"/></div> </Marquee> </div>
</div>

```astro
---
---

<div class="flex gap-6 h-60">
  <Marquee class="[&_.marquee-content]:space-y-8 space-y-8" direction="top">
    <div class="bg-muted px-10 py-7 rounded-lg flex items-center justify-center"><img src="/demo/logo/sonos.svg" alt="Sonos" class="h-5 self-center mx-10 dark:invert"/></div>
    <div class="bg-muted px-10 py-7 rounded-lg flex items-center justify-center"><img src="/demo/logo/uber.svg" alt="Uber" class="h-5 self-center mx-10 dark:invert"/></div>
    <div class="bg-muted px-10 py-7 rounded-lg flex items-center justify-center"><img src="/demo/logo/visa.svg" alt="Visa" class="h-5 self-center mx-10 dark:invert"/></div>
    <div class="bg-muted px-10 py-7 rounded-lg flex items-center justify-center"><img src="/demo/logo/coca-cola.svg" alt="Coca-Cola" class="h-6 self-center mx-10 dark:invert"/></div>
    <div class="bg-muted px-10 py-7 rounded-lg flex items-center justify-center"><img src="/demo/logo/nike.svg" alt="Nike" class="h-5 self-center mx-10 dark:invert"/></div>
  </Marquee>
  <Marquee class="[&_.marquee-content]:space-y-8 space-y-8" direction="bottom">
    <div class="bg-muted px-10 py-7 rounded-lg flex items-center justify-center"><img src="/demo/logo/sonos.svg" alt="Sonos" class="h-5 self-center mx-10 dark:invert"/></div>
    <div class="bg-muted px-10 py-7 rounded-lg flex items-center justify-center"><img src="/demo/logo/uber.svg" alt="Uber" class="h-5 self-center mx-10 dark:invert"/></div>
    <div class="bg-muted px-10 py-7 rounded-lg flex items-center justify-center"><img src="/demo/logo/visa.svg" alt="Visa" class="h-5 self-center mx-10 dark:invert"/></div>
    <div class="bg-muted px-10 py-7 rounded-lg flex items-center justify-center"><img src="/demo/logo/coca-cola.svg" alt="Coca-Cola" class="h-6 self-center mx-10 dark:invert"/></div>
    <div class="bg-muted px-10 py-7 rounded-lg flex items-center justify-center"><img src="/demo/logo/nike.svg" alt="Nike" class="h-5 self-center mx-10 dark:invert"/></div>
  </Marquee>
</div>
```