Marquee

A horizontally auto-scrolling container for repeating content like logos or messages.

1
---
2
import { Marquee } from '@bejamas/ui/components/marquee';
3
---
4

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

Installation

bunx bejamas add marquee

npx bejamas add marquee

pnpm dlx bejamas add marquee

yarn dlx bejamas add marquee

Usage

1
---
2
import { Marquee } from '@bejamas/ui/components/marquee';
3
---
4
<Marquee>
5
  <!-- Your content here -->
6
</Marquee>

Props

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

Examples

Direction

1
---
2
import { Marquee } from '@bejamas/ui/components/marquee';
3
---
4

5
<div class="flex gap-6 h-60">
6
  <Marquee class="[&_.marquee-content]:space-y-8 space-y-8" direction="top">
7
    <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>
8
    <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>
9
    <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>
10
    <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>
11
    <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>
12
  </Marquee>
13
  <Marquee class="[&_.marquee-content]:space-y-8 space-y-8" direction="bottom">
14
    <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>
15
    <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>
16
    <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>
17
    <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>
18
    <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>
19
  </Marquee>
20
</div>