Skip to main content

​
Installation

npm install @kuzenbo/core

​
Usage

import { Marquee } from "@kuzenbo/core";

function Example() {
  const items = ["Item 1", "Item 2", "Item 3", "Item 4", "Item 5"];

  return (
    <Marquee>
      <Marquee.Content>
        {items.map((item, i) => (
          <Marquee.Item key={i}>
            <div className="px-4">{item}</div>
          </Marquee.Item>
        ))}
      </Marquee.Content>
    </Marquee>
  );
}

​
Props

​
Marquee

​
className
string
Additional CSS classes to apply to the container.

​
Marquee.Content

​
speed
number
default:"40"
Animation speed in seconds.
​
direction
'left' | 'right'
default:"'left'"
Direction of scrolling.
​
pauseOnHover
boolean
default:"false"
Whether to pause animation on hover.
​
reverse
boolean
default:"false"
Whether to reverse the animation direction.
​
className
string
Additional CSS classes to apply.

​
Marquee.Item

​
className
string
Additional CSS classes to apply to each item.

​
Marquee.Fade

​
className
string
Additional CSS classes for fade effect.

​
Examples

​
Logo Showcase

const logos = [
  { name: "Company 1", url: "/logo1.svg" },
  { name: "Company 2", url: "/logo2.svg" },
  { name: "Company 3", url: "/logo3.svg" },
];

<Marquee>
  <Marquee.Content>
    {logos.map((logo) => (
      <Marquee.Item key={logo.name}>
        <img src={logo.url} alt={logo.name} className="h-12" />
      </Marquee.Item>
    ))}
  </Marquee.Content>
  <Marquee.Fade />
</Marquee>

​
Pause on Hover

<Marquee>
  <Marquee.Content pauseOnHover>
    {items.map((item, i) => (
      <Marquee.Item key={i}>
        {item}
      </Marquee.Item>
    ))}
  </Marquee.Content>
</Marquee>

​
Reverse Direction

<Marquee>
  <Marquee.Content direction="right">
    {items.map((item, i) => (
      <Marquee.Item key={i}>
        {item}
      </Marquee.Item>
    ))}
  </Marquee.Content>
</Marquee>

​
Custom Speed

<Marquee>
  <Marquee.Content speed={20}>
    {/* Faster animation (20 seconds) */}
    {items.map((item, i) => (
      <Marquee.Item key={i}>
        {item}
      </Marquee.Item>
    ))}
  </Marquee.Content>
</Marquee>

​
With Fade Effect

<Marquee className="relative">
  <Marquee.Content>
    {items.map((item, i) => (
      <Marquee.Item key={i}>
        {item}
      </Marquee.Item>
    ))}
  </Marquee.Content>
  <Marquee.Fade />
</Marquee>

Build docs developers (and LLMs) love

Get started for freeTalk to us