Marquee

Installation

pnpm dlx shadcn@latest add https://deltacomponents.dev/r/marquee.json

Usage

Copyimport { Marquee } from "@/registry/delta-ui/delta/marquee"
 
export default function Example() {
  return (
    <Marquee speed={25} gap={60}>
      <img src="/logo1.svg" alt="Logo 1" className="h-12 w-auto" />
      <img src="/logo2.svg" alt="Logo 2" className="h-12 w-auto" />
      <img src="/logo3.svg" alt="Logo 3" className="h-12 w-auto" />
      {/* Add any content as children */}
    </Marquee>
  )
}

Examples

Basic Brand Marquee

Component brandmarquee-demo not found in registry.

Testimonial Cards

Preview

Code

Sarah Chen

Product Manager at TechCorp

"This component library has revolutionized our development workflow. The quality and attention to detail is exceptional."

Alex Rodriguez

Senior Developer at StartupXYZ

"Beautiful components that are actually usable in production. The documentation is clear and examples are helpful."

Emily Johnson

Design Lead at CreativeStudio

"Perfect balance between design and functionality. These components save us hours of development time."

Michael Kim

Frontend Engineer at DevTeam

"Clean, well-documented, and performant. Everything we need for modern web applications."

Jessica Wu

UI/UX Designer at DesignLab

"These components bridge the gap between design and development perfectly. Highly recommended!"

Sarah Chen

Product Manager at TechCorp

"This component library has revolutionized our development workflow. The quality and attention to detail is exceptional."

Alex Rodriguez

Senior Developer at StartupXYZ

"Beautiful components that are actually usable in production. The documentation is clear and examples are helpful."

Emily Johnson

Design Lead at CreativeStudio

"Perfect balance between design and functionality. These components save us hours of development time."

Michael Kim

Frontend Engineer at DevTeam

"Clean, well-documented, and performant. Everything we need for modern web applications."

Jessica Wu

UI/UX Designer at DesignLab

"These components bridge the gap between design and development perfectly. Highly recommended!"

Right-to-Left Direction

Copy<Marquee direction="right" speed={30} gap={100}>
  <div className="bg-card w-64 rounded-lg p-4">Card 1</div>
  <div className="bg-card w-64 rounded-lg p-4">Card 2</div>
  <div className="bg-card w-64 rounded-lg p-4">Card 3</div>
</Marquee>

Without Fade Effect and Hover Pause

Copy<Marquee showFade={false} pauseOnHover={false} speed={15}>
  {/* Your content here */}
</Marquee>

Disable the edge fade effect and continuous movement without pausing on hover for a clean, uninterrupted scrolling experience.

Stacked Marquees

Preview

Code

Showcase multiple marquees with different directions for dynamic layouts.

API Reference

Marquee

Features

• Flexible Content: Accept any React children - logos, cards, text, or custom components
• Smooth Animation: Seamless infinite scrolling with configurable speed
• Direction Control: Support for left-to-right or right-to-left scrolling
• Hover Interactions: Pause animation on hover for better user experience
• Fade Effects: Configurable edge fading for a polished look
• Responsive Design: Automatic scaling and responsive behavior
• Performance Optimized: Efficient rendering with proper duplication handling
• Accessible: Keyboard navigation friendly and semantic HTML structure
• Customizable: Extensive styling options and CSS customization

Use Cases

The Marquee component is versatile and can be used for:

• Brand Logos: Showcase partner companies and trusted brands
• Testimonials: Display customer reviews and feedback
• Product Highlights: Feature key products or services
• Social Proof: Show client testimonials or user-generated content
• Announcements: Display rotating promotional messages
• Portfolio Items: Showcase work samples or case studies

Styling

The component uses CSS-in-JS for animations and supports custom styling through:

• className prop for container styling
• itemClassName prop for individual item styling
• CSS custom properties for advanced customization
• Tailwind CSS classes for responsive design

Accessibility

• Reduced motion support (respects prefers-reduced-motion)
• Keyboard navigation friendly
• Semantic HTML structure
• Proper focus management for interactive content