About
A React port of elastic-ui's Marquee: a horizontally scrolling band of short entries (results, clients, a tech stack) that repeats until it fills its column, pauses on hover or when off-screen, and falls back to a plain wrapped list for reduced-motion users and screen readers. Original Vue component by Jose Estevez (elastic-ui), ported faithfully to React/TSX.
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Marquee to your project and fits it to your theme.
Code
How Marquee is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
"use client";
import Marquee, { MarqueeItem } from "@/components/ui/marquee";
import { Award, Medal, Trophy } from "lucide-react";
const RESULTS = [
{
icon: Trophy,
outcome: "Winner",
event: "Regional hackathon",
year: "2026",
},
{
icon: Medal,
outcome: "2nd place",
event: "Science challenge",
year: "2026",
},
{
icon: Award,
outcome: "Selected",
event: "Research fellowship",
year: "2025",
},
];
export default function MarqueeDemo() {
return (
<div className="mx-auto flex w-full max-w-2xl flex-col gap-10 py-10">
<Marquee label="Results" size="md" speed={40}>
{RESULTS.map((result) => (
<MarqueeItem key={result.outcome + result.event} icon={result.icon}>
{result.outcome} · {result.event} {result.year}
</MarqueeItem>
))}
</Marquee>
</div>
);
}
Dependencies
More by joseestevez520
View all
Chart
Day Strip
Prose
File Drop Zone