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";
const RESULTS = [
{ outcome: "Winner", event: "Regional hackathon", year: "2026" },
{ outcome: "2nd place", event: "Science challenge", year: "2026" },
{ outcome: "Selected", event: "Research fellowship", year: "2025" },
];
export default function MarqueeWithoutIconsDemo() {
return (
<div className="mx-auto flex w-full max-w-2xl flex-col gap-10 py-10">
<Marquee label="Results" size="sm" speed={40}>
{RESULTS.map((result) => (
<MarqueeItem key={result.outcome + result.event}>
{result.outcome} · {result.event} {result.year}
</MarqueeItem>
))}
</Marquee>
</div>
);
}
Dependencies
More by joseestevez520
View all
Chart
1
Day Strip
Prose
File Drop Zone