Marquee Component

The Marquee component is a versatile UI element that creates a scrolling marquee effect. It is highly customizable and can adapt to various use cases, such as displaying text or other content in a continuous loop.

Features

Customizable Speed: Adjust the scrolling speed dynamically.
Responsive Design: Automatically adapts to the container's dimensions.
Interactive: Supports hover and scroll-based interactions.
Smooth Animations: Uses spring-based animations for fluid transitions.
Lightweight: Optimized for performance with minimal dependencies.

Playground

Toggle direction, hover-pause, and scroll reactivity.

Controls

Duration (s) — higher is slower10

Reverse direction

Pause on hover

React to scroll

Installation

npx shadcn@latest add @sona-ui/marquee

Usage


const TECH_STACK = [
  {
    name: "Next.js",
    icon: <NextjsIcon />,
  },
  {
    name: "React",
    icon: <ReactIcon />,
  },
  {
    name: "Typescript",
    icon: <TypescriptIcon />,
  },
  {
    name: "Tailwind CSS",
    icon: <TailwindIcon />,
  },
];
 
export default function MarqueeExample() {
  return (
    <Marquee duration={10} containerClassName="md:space-x-16 " activeHover>
      <div className="flex items-center gap-x-8 md:gap-x-16">
        {TECH_STACK.map((tech) => (
          <Icon key={tech.name} text={tech.name}>
            {tech.icon}
          </Icon>
        ))}
      </div>
    </Marquee>
  );
}
 
const Icon = ({ children, text }: { children: ReactNode; text: string }) => {
  return (
    <div className="flex h-16 shrink items-center gap-x-4">
      <span className="*:xl:h-16 *:xl:w-16">{children}</span>
      <span className="text-sm font-medium lg:text-lg">{text}</span>
    </div>
  );
};

Props

Property	Type	Default	Description
`children`	`React.ReactNode`	`required`	The content to be rendered inside the marquee.
`className`	`string`	`—`	Additional class names for custom styling of the marquee items.
`containerClassName`	`string`	`—`	Additional class names for custom styling of the marquee container.
`duration`	`number`	`10`	The duration of the marquee animation in seconds.
`reverse`	`boolean`	`false`	Determines whether the marquee scrolls in reverse direction.
`activeScroll`	`boolean`	`false`	Enables dynamic speed adjustment based on scroll velocity.
`activeHover`	`boolean`	`false`	Pauses the marquee animation when hovered.