Marquee

Galleries 72

About

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

import {
  Marquee,
  MarqueeItem,
  MarqueeFade,
  MarqueeContent
} from "@/components/ui/marquee"

const Demo = () => {
  return (
    <Marquee>
      <MarqueeFade side="left" />
      <MarqueeFade side="right" />
      <MarqueeContent>
        {new Array(10).fill(null).map((_, index) => (
          <MarqueeItem key={index} className="w-32 h-32">
            <img
              src={`https://placehold.co/128x128?random=${index}`}
              alt={`Image ${index}`}
              className="rounded-full overflow-hidden"
            />
          </MarqueeItem>
        ))}
      </MarqueeContent>
    </Marquee>
  )
}
  
export default { Demo }