marquee

bejamas-ui/marquee

FreeComponent

bejamas/ui publishes no description for this item.

Live preview

live · rendered by the registry

Rendered by bejamas/ui on their own page — this is the component running, not a screenshot of it.

Install it

npx shadcn@latest add https://ui.bejamas.com/r/marquee.json

Source

ui/marquee/Marquee.astroui.bejamas.com/r/marquee.json · first 6 KB

1---
2// Generated from bejamas-juno style registry. Do not edit packages/ui/src/components/marquee/Marquee.astro directly.
3/**
4 * @component Marquee
5 * @title Marquee
6 * @description A horizontally auto-scrolling container for repeating content like logos or messages.
7 * @status stable
8 * @figmaUrl https://www.figma.com/design/koxai7zw5vIuBzuVxe5T2l/bejamas-ui?node-id=2511-7717&t=YFStJ3V8fXEO8QD8-4
9 *
10 * @preview
11 *
12 *
13 * <Marquee class="dark:invert">
14 *   <img src="/demo/logo/sonos.svg" alt="Netflix" class="h-5 self-center mx-10"/>
15 *   <img src="/demo/logo/uber.svg" alt="Uber" class="h-5 self-center mx-10"/>
16 *   <img src="/demo/logo/visa.svg" alt="Visa" class="h-5 self-center mx-10"/>
17 *   <img src="/demo/logo/coca-cola.svg" alt="Coca-Cola" class="h-6 self-center mx-10"/>
18 *   <img src="/demo/logo/nike.svg" alt="Nike" class="h-5 self-center mx-10"/>
19 * </Marquee>
20 *
21 * @usage
22 *
23 * ```astro nocollapse
24 * ---
25 * import { Marquee } from '@bejamas/ui/components/marquee';
26 * ---
27 * <Marquee>
28 *   <!-- Your content here -->
29 * </Marquee>
30 * ```
31 *
32 * @examples
33 *
34 * ### Direction
35 *
36 * <div class="flex gap-6 h-60">
37 *   <Marquee class="[&_.marquee-content]:space-y-8 space-y-8" direction="top">
38 *     <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>
39 *     <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>
40 *     <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>
41 *     <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>
42 *     <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>
43 *   </Marquee>
44 *   <Marquee class="[&_.marquee-content]:space-y-8 space-y-8" direction="bottom">
45 *     <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>
46// … truncated

Files it writes

ui/marquee/Marquee.astro
ui/marquee/index.ts

More from bejamas/ui

All 41 items

Same registry, same kind — the ones you would have found next
Component	Registry	Kind	Access	Installs
accordionaccordion	bejamas/ui	Components	Free	1 dep · 5 files
alertalert	bejamas/ui	Components	Free	no deps · 4 files
avataravatar	bejamas/ui	Components	Free	no deps · 7 files
badgebadge	bejamas/ui	Components	Free	no deps · 2 files
breadcrumbbreadcrumb	bejamas/ui	Components	Free	no deps · 5 files
buttonbutton	bejamas/ui	Components	Free	no deps · 2 files
button-groupbutton-group	bejamas/ui	Components	Free	no deps · 4 files
cardcard	bejamas/ui	Components	Free	no deps · 10 files