Preview
Sarah Johnson
@sarahjohnson
Frontend Developer with 5+ years experience in React and TypeScript
Mike Chen
@mikechen
UI/UX Designer creating beautiful and intuitive user experiences
Emily Davis
@emilydavis
Product Manager driving innovation and strategic product development
Alex Rodriguez
@alexrodriguez
Backend Engineer building scalable and robust server architectures
Lisa Wang
@lisawang
DevOps Specialist ensuring smooth deployments and infrastructure
David Kim
@davidkim
Data Scientist extracting insights from complex datasets
Sarah Johnson
@sarahjohnson
Frontend Developer with 5+ years experience in React and TypeScript
Mike Chen
@mikechen
UI/UX Designer creating beautiful and intuitive user experiences
Emily Davis
@emilydavis
Product Manager driving innovation and strategic product development
Alex Rodriguez
@alexrodriguez
Backend Engineer building scalable and robust server architectures
Lisa Wang
@lisawang
DevOps Specialist ensuring smooth deployments and infrastructure
David Kim
@davidkim
Data Scientist extracting insights from complex datasets
Installation
import { Marquee } from "@/components/ui/marquee"Code
import { Marquee } from "@/components/ui/marquee"
<Marquee />API Reference
Marquee
Smooth scrolling marquee for cards or custom nodes with optional double layer.
import { Marquee, defaultMarqueeCards } from "@/components/ui/marquee"Props
| Prop | Type | Default | Description |
|---|---|---|---|
cards | Array<{ id: number | string; name: string; description: string; avatar?: string; image?: string }> | — | Cards to render when not using children |
speed | "slow" | "normal" | "fast" | "normal" | Scroll speed |
direction | "left" | "right" | "left" | Scroll direction |
pauseOnHover | boolean | true | Pause animation on hover |
fadeEdges | boolean | true | Show edge fading |
className | string | "" | Additional CSS classes |
layers | "single" | "double" | "single" | Single or double marquee layers |
children | React.ReactNode | — | Custom nodes; overrides cards |
Examples
Example 1
// Cards
<Marquee cards={defaultMarqueeCards} />