Marquee
A dynamic and customizable sliding component that creates smooth, infinite scrolling animations for showcasing content like testimonials, logos, or announcements.
A marquee component
Installation
npx shadcn@latest add https://badtz-ui.com/r/marquee.jsonInstall the following dependencies:
npm install clsx tailwind-mergeAdd the utils file to the @/lib folder
import { ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}Copy and paste the following code into your project.
Component: marquee
Tailwind v4: Update @/global.css
@theme inline {
--animate-marquee-left: marquee-left var(--duration, 30s) linear infinite;
--animate-marquee-right: marquee-right var(--duration, 30s) linear infinite;
}
@keyframes marquee-left {
from {
transform: translateX(0);
}
to {
transform: translateX(calc(-100% - var(--gap)));
}
}
@keyframes marquee-right {
from {
transform: translateX(calc(-100% - var(--gap)));
}
to {
transform: translateX(0);
}
}Tailwind v3: Update tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
theme: {
extend: {
keyframes: {
"marquee-left": {
from: { transform: "translateX(0)" },
to: { transform: "translateX(calc(-100% - var(--gap)))" },
},
"marquee-right": {
from: { transform: "translateX(calc(-100% - var(--gap)))" },
to: { transform: "translateX(0)" },
},
},
animation: {
"marquee-left": "marquee-left var(--duration, 30s) linear infinite",
"marquee-right": "marquee-right var(--duration, 30s) linear infinite",
},
},
},
};Update the import paths to match your project setup.
Usage
import { Marquee } from "@/components/ui/marquee";<Marquee>
<TestimonialCard />
</Marquee>Props
marquee props.
Type information not available