Component

Marquee

The all in one marquee component.

'use client'

import { Marquee } from '@/components/marquee'
import { IBMLogo, NasaLogo, SpaceXLogo, ValveLogo } from '@/components/logos'

const LOGOS = [IBMLogo, NasaLogo, SpaceXLogo, ValveLogo]
const ITEMS = [...LOGOS, ...LOGOS].map((Logo, i) => ({ Logo, id: i }))

export function MarqueeDemo() {
  return (
    <div className="py-14">
      <Marquee speed={100} speedFactor={0.5} direction={1} play>
        {ITEMS.map(({ Logo, id }) => (
          <Logo key={id} className="h-8 w-auto" />
        ))}
      </Marquee>
    </div>
  )
}

export default MarqueeDemo

Installation

pnpm dlx shadcn@latest add https://r.joyco.studio/marquee.json

Usage

import { Marquee } from '@/components/marquee'
 
<Marquee speed={100} speedFactor={1} direction={1}>
  <div>Your content here</div>
</Marquee>

On this page

Maintainers
Downloads
9Total
0 downloads today