Signature

Marquee

An endless horizontal ticker (logos, keywords). CSS only: the content is rendered twice and translated; the copy is hidden from assistive technology, and edges fade out. Under reduced motion it stops and becomes scrollable.

Tailwind v4React 19Native dialogPopover APICanvas

demos/marquee.tsx

import { Marquee } from "pixelbits/marquee";

export default function Demo() {
  return (
    <Marquee aria-label="Built with" className="w-full text-2xl font-light text-pb-muted">
      {["Tailwind v4", "React 19", "Native dialog", "Popover API", "Canvas"].map((t) => (
        <span key={t} className="flex items-center gap-10 whitespace-nowrap">
          {t}
          <i className="size-2 bg-pb-accent" />
        </span>
      ))}
    </Marquee>
  );
}

Installation

npm: import

import { Marquee } from "pixelbits/marquee";

shadcn: copy the source

npx shadcn add https://pixelbits.ali-moradi-develop.com/r/marquee.json

API

<Marquee>

Example

<Marquee aria-label="Built with"><span>Tailwind v4</span><span>Radix</span><span>Motion</span></Marquee>

Prop	Type	Default	Description
children*	ReactNode	—	The items, in a row. They are repeated to fill the loop.
duration	number	30	Seconds for one full loop.
reverse	boolean	false	Scroll toward the end instead of the start.
pauseOnHover	boolean	true	Pause while hovered or focused.
gap	string	"2.5rem"	Gap between items, any CSS length.

Also accepts every prop of HTMLAttributes<HTMLDivElement>.