Marquee

A horizontal scrolling marquee component. It renders a container for items that scroll automatically. Use it to display a list of items in a continuous motion.

byShadcnblocks.com from Kibo UI

Installation

terminal

pnpm dlx layro-cli add @shadcnblocks/marquee

npx layro-cli add @shadcnblocks/marquee

npx layro-cli add @shadcnblocks/marquee

bunx layro-cli add @shadcnblocks/marquee

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

"use client";

import type { HTMLAttributes } from "react";
import type { MarqueeProps as FastMarqueeProps } from "react-fast-marquee";
import FastMarquee from "react-fast-marquee";
import { cn } from "@/lib/utils";

export type MarqueeProps = HTMLAttributes<HTMLDivElement>;

export const Marquee = ({ className, ...props }: MarqueeProps) => (
  <div
    className={cn("relative w-full overflow-hidden", className)}
    {...props}
  />