Things

The Marquee component displays a continuous horizontal scrolling animation. It supports customizable speed, direction, and pause on hover functionality. Built from scratch using React and CSS animations. No dependencies on any UI library.

Quick Install

Install via shadcn/ui CLI

bash

npx shadcn@latest add https://things.marvlock.dev/registry/ui/marquee.json

Usage

tsx

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

function MyComponent() {
  return (
    <Marquee>
      <span>Item 1</span>
      <span>Item 2</span>
      <span>Item 3</span>
      <span>Item 4</span>
      <span>Item 5</span>
    </Marquee>
  )
}

Examples

Default

Item 1

Item 2

Item 3

Item 4

Item 5

Item 1

Item 2

Item 3

Item 4

Item 5

Right Direction

Item 1

Item 2

Item 3

Item 4

Item 5

Item 1

Item 2

Item 3

Item 4

Item 5

Faster Speed

Item 1

Item 2

Item 3

Item 4

Item 5

Item 1

Item 2

Item 3

Item 4

Item 5

Pause on Hover

Item 1

Item 2

Item 3

Item 4

Item 5

Item 1

Item 2

Item 3

Item 4

Item 5