Marquee

An infinite scrolling track for logos, testimonials or anything else.

Open in

Lina

@lina

Dropped it into our landing page in two minutes.

Marc

@marc

Finally a component library that stays out of the way.

Sofia

@sofia

The details are what sell it. Clean and quiet.

Noah

@noah

Works with my existing shadcn setup, no friction.

Yara

@yara

Motion that feels intentional, not decorative.

Tom

@tom

The CLI install is the killer feature for me.

Installation#

pnpm dlx shadcn@latest add https://ui.balick.me/r/marquee.json

Or, with the namespace configured: @balick/marquee

Usage#

import { Marquee } from "@/components/ui/marquee"

export function Logos() {
  return (
    <Marquee pauseOnHover fade>
      <span>Acme</span>
      <span>Globex</span>
      <span>Initech</span>
    </Marquee>
  )
}

Props#

Prop	Type	Default	Description
`reverse` Reverse the scroll direction.	`boolean`	false	Reverse the scroll direction.
`pauseOnHover` Pause the animation while the pointer is over the marquee.	`boolean`	false	Pause the animation while the pointer is over the marquee.
`vertical` Scroll vertically instead of horizontally.	`boolean`	false	Scroll vertically instead of horizontally.
`fade` Fade the edges into the background.	`boolean`	false	Fade the edges into the background.
`repeat` How many times the content is repeated to fill the track.	`number`	4	How many times the content is repeated to fill the track.
`duration` Duration of one full loop, as a CSS time.	`string`	"40s"	Duration of one full loop, as a CSS time.
`gap` Space between items, as a CSS length.	`string`	"1rem"	Space between items, as a CSS length.