Collaboration
Project Management
Finance
Marquee
Marquees are a great way to show a list of items in a horizontal scrolling motion.
Installation
npx love-ui@latest add marqueeUsage
import { Marquee, MarqueeContent, MarqueeFade, MarqueeItem } from "@/components/marquee"<Marquee>
<MarqueeFade />
<MarqueeContent>
{items.map((item) => (
<MarqueeItem key={item.id}>
{item.content}
</MarqueeItem>
))}
</MarqueeContent>
</Marquee>Features
- Drag and drop items between groups
- Customize the item contents
Examples
Without fading
"use client";
import { Marquee, MarqueeContent, MarqueeItem } from "../../../../../packages/marquee";
const Example = () => (
<Marquee>
<MarqueeContent>
{new Array(10).fill(null).map((_, index) => (
<MarqueeItem className="h-16 w-16" key={index}>
<img
alt={`Placeholder ${index}`}
className="overflow-hidden rounded-full"
src={`https://placehold.co/64x64?random=${index}`}
/>
</MarqueeItem>
))}
</MarqueeContent>
</Marquee>
);
export default Example;
Without pre-defined options
"use client";
import {
Marquee,
MarqueeContent,
MarqueeFade,
MarqueeItem,
} from "../../../../../packages/marquee";
const Example = () => (
<div className="flex size-full items-center justify-center bg-background">
<Marquee>
<MarqueeFade side="left" />
<MarqueeFade side="right" />
<MarqueeContent autoFill={false} loop={1} pauseOnHover={false}>
{new Array(10).fill(null).map((_, index) => (
<MarqueeItem className="h-16 w-16" key={index}>
<img
alt={`Placeholder ${index}`}
className="overflow-hidden rounded-full"
src={`https://placehold.co/64x64?random=${index}`}
/>
</MarqueeItem>
))}
</MarqueeContent>
</Marquee>
</div>
);
export default Example;
Custom spacing
"use client";
import {
Marquee,
MarqueeContent,
MarqueeFade,
MarqueeItem,
} from "../../../../../packages/marquee";
const Example = () => (
<div className="flex size-full items-center justify-center bg-background">
<Marquee>
<MarqueeFade side="left" />
<MarqueeFade side="right" />
<MarqueeContent>
{new Array(10).fill(null).map((_, index) => (
<MarqueeItem className="-mx-2 h-16 w-16" key={index}>
<img
alt={`Placeholder ${index}`}
className="overflow-hidden rounded-full ring-2 ring-background"
src={`https://placehold.co/64x64?random=${index}`}
/>
</MarqueeItem>
))}
</MarqueeContent>
</Marquee>
</div>
);
export default Example;