ComponentsCore
Marquee
A scrolling text display box that displays information from one or more text display boxes.
Example
Usage
Installation
Install following dependencies:
npm install react-aria-components tw-animate-css tailwindcss-react-aria-components class-variance-authority lucide-react clsx tailwind-merge motion@keyframes marquee {
0% {
transform: translateX(0%);
}
100% {
transform: translateX(calc(-100% - var(--gap)));
}
}
@keyframes marqueeY {
0% {
transform: translateY(0%);
}
100% {
transform: translateY(calc(-100% - var(--gap)));
}
}Add cn helper using clsx and twMerge for conditional class merging in Tailwind components.
Copy and paste the following code into your project.
npx libravelui@latest add marqueeAnatomy
import {
Marquee,
MarqueeContent,
MarqueeItem,
} from "@/components/ui/core/marquee";<Marquee speed="normal" direction="left" stopOnHover fade autoFill>
<MarqueeContent>
<MarqueeItem className="px-8">Fast Performance</MarqueeItem>
<MarqueeItem className="px-8">Beautiful Design</MarqueeItem>
<MarqueeItem className="px-8">Customizable</MarqueeItem>
<MarqueeItem className="px-8">Responsive Layout</MarqueeItem>
<MarqueeItem className="px-8">Dark Mode Ready</MarqueeItem>
</MarqueeContent>
</Marquee>Another Example
Usage
Props
Loading types…