Marquee

An auto-scrolling strip that loops its content seamlessly. Hovering or focusing pauses the motion and hands control to the user, who can scroll through the items with a wheel, trackpad, or swipe; when they leave, the marquee resumes from wherever they stopped. Respects prefers-reduced-motion by staying static while remaining manually scrollable.

VIN DecoderLicense Plate LookupVehicle HistoryMarket ValueVehicle ImagesOBD CodesVehicle RecallsVehicle Specs

Hover to pause, then scroll through the items with your wheel, trackpad, or a swipe.

Installation

Import from the package. Do not run shadcn add in your app.

tsx

import { Marquee } from "@carsxe/design-system/components/marquee"

Usage

tsx

import { Marquee } from "@carsxe/design-system/components/marquee"

<Marquee>
  <span>VIN Decoder</span>
  <span>License Plate Lookup</span>
  <span>Vehicle History</span>
</Marquee>

Reversed with a faster loop

VIN DecoderLicense Plate LookupVehicle HistoryMarket ValueVehicle ImagesOBD CodesVehicle RecallsVehicle Specs

Always running

VIN DecoderLicense Plate LookupVehicle HistoryMarket ValueVehicle ImagesOBD CodesVehicle RecallsVehicle Specs

API Reference

Prop	Type	Default
duration	number	24 (seconds per loop)
reverse	boolean	false
pauseOnHover	boolean	true