8
Components

Marquee

A customizable marquee component with horizontal and vertical scrolling, reverse directions, and pause-on-hover support.

Introduction

The Marquee component creates smooth scrolling content in either horizontal or vertical orientation, perfect for showcasing content in a dynamic, space-efficient manner. It supports customizable speeds, directions, and interactions like pausing on hover.

Horizontal Marquee

🚀 Rocket
🌟 Star
🎨 Palette
⚡ Lightning
🚀 Rocket
🌟 Star
🎨 Palette
⚡ Lightning
🚀 Rocket
🌟 Star
🎨 Palette
⚡ Lightning
🚀 Rocket
🌟 Star
🎨 Palette
⚡ Lightning
🚀 Rocket
🌟 Star
🎨 Palette
⚡ Lightning
🚀 Rocket
🌟 Star
🎨 Palette
⚡ Lightning
🚀 Rocket
🌟 Star
🎨 Palette
⚡ Lightning
🚀 Rocket
🌟 Star
🎨 Palette
⚡ Lightning

Customize Your Marquee

🚀 Rocket
🌟 Star
🎨 Palette
⚡ Lightning
🚀 Rocket
🌟 Star
🎨 Palette
⚡ Lightning
🚀 Rocket
🌟 Star
🎨 Palette
⚡ Lightning
🚀 Rocket
🌟 Star
🎨 Palette
⚡ Lightning
Horizontal
Normal
Enabled
Current: 40s (slower values = slower animation)
Current: 0.5rem
Current: 4x
Current: 8px
Current: 128px
Current: 64px
🚀 Rocket
🌟 Star
🎨 Palette
⚡ Lightning
import { Marquee } from "@/components/ui/marquee";
 
export function CustomMarquee() {
  const items = ["🚀 Rocket", "🌟 Star", "🎨 Palette", "⚡ Lightning"];
  
  return (
    <Marquee
      
      
      pauseOnHover
      repeat={4}
      style={{ --duration: "40s", --gap: "0.5rem" }}
      
    >
      {items.map((item, index) => (
        <div
          key={index}
          className="flex items-center justify-center mx-2 shadow-md rounded-[8px]"
          style={{
            width: "128px",
            height: "64px",
            backgroundColor: "#3b82f6",
            color: "#ffffff",
          }}
        >
          {item}
        </div>
      ))}
    </Marquee>
  );
}

Vertical Marquee

🚀 Rocket
🌟 Star
🎨 Palette
⚡ Lightning
🚀 Rocket
🌟 Star
🎨 Palette
⚡ Lightning
🚀 Rocket
🌟 Star
🎨 Palette
⚡ Lightning
🚀 Rocket
🌟 Star
🎨 Palette
⚡ Lightning
🚀 Rocket
🌟 Star
🎨 Palette
⚡ Lightning
🚀 Rocket
🌟 Star
🎨 Palette
⚡ Lightning
🚀 Rocket
🌟 Star
🎨 Palette
⚡ Lightning
🚀 Rocket
🌟 Star
🎨 Palette
⚡ Lightning

Installation

Quickly add the component using:

npx axionjs-ui add marquee

File Structure

Props

PropTypeDefault
className
string
-
reverse
boolean
false
pauseOnHover
boolean
false
children
ReactNode
-
vertical
boolean
false
repeat
number
4
style
React.CSSProperties
-

Advanced Usage

Customizing Animation Speed

You can adjust the scroll speed by changing the CSS --duration variable:

<Marquee style={{ "--duration": "20s" }}>
  {/* Faster scrolling content */}
</Marquee>
 
<Marquee style={{ "--duration": "80s" }}>
  {/* Slower scrolling content */}
</Marquee>

Adjusting Item Spacing

Modify the gap between items using the --gap CSS variable:

<Marquee style={{ "--gap": "2rem" }}>
  {/* Content with larger spacing */}
</Marquee>
 
<Marquee style={{ "--gap": "0.25rem" }}>
  {/* Content with minimal spacing */}
</Marquee>

By combining with other components, you can create more complex scroll experiences:

<div className="rounded-lg border p-4 bg-muted/50">
  <h3 className="text-lg font-semibold mb-2">Featured Products</h3>
  <Marquee 
    pauseOnHover 
    className="py-4"
    style={{ "--duration": "30s", "--gap": "1.5rem" }}
  >
    {products.map(product => (
      <Card key={product.id} className="w-64 shadow-md mx-2">
        <CardHeader>
          <CardTitle>{product.name}</CardTitle>
        </CardHeader>
        <CardContent>
          <p>${product.price}</p>
        </CardContent>
        <CardFooter>
          <Button>View Details</Button>
        </CardFooter>
      </Card>
    ))}
  </Marquee>
</div>

News Ticker Example

Create a news ticker with the marquee component:

<div className="bg-black text-white px-4 py-2 flex items-center">
  <span className="font-bold mr-4">BREAKING:</span>
  <Marquee 
    className="p-0" 
    style={{ "--duration": "25s" }}
  >
    {newsItems.map((item, i) => (
      <span key={i} className="mx-6">
        {item}
        <span className="mx-2 text-primary">•</span>
      </span>
    ))}
  </Marquee>
</div>

Accessibility

Keep these accessibility considerations in mind when using the Marquee component:

  • Motion Sensitivity: Automatically moving content may cause issues for users with vestibular disorders. Consider providing a way to pause or disable animations site-wide.
  • Screen Reader Support: Make sure the scrolling content is accessible to screen readers.
  • Alternative View: For critical information, provide an alternative, static view for users who prefer reduced motion.

Conclusion

The Marquee component offers a flexible and customizable way to create scrolling content in both horizontal and vertical directions. It’s perfect for showcasing related items, creating news tickers, or adding dynamic visual interest to your application with minimal effort.

Previous

Input Limited

Next

Menubar

On this page