║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

---

title: Marquee description: An animated scrolling component that continuously moves content horizontally or vertically. preview: true links: api: /docs/components/marquee#api-reference

<ComponentTabs name="marquee-demo" />

Installation

CLI

npx shadcn@latest add "https://diceui.com/r/marquee"

Manual

<Steps> <Step> Install the following dependencies:

 ```package-install
 @radix-ui/react-slot class-variance-authority
 ```

</Step> <Step> Copy and paste the following code into your project.

<ComponentSource name="marquee" />

</Step> <Step> Add the following CSS animations to your `globals.css` file:

```css
:root {
  --animate-marquee-left: marquee-left var(--marquee-duration) linear var(--marquee-loop-count);
  --animate-marquee-right: marquee-right var(--marquee-duration) linear var(--marquee-loop-count);
  --animate-marquee-left-rtl: marquee-left-rtl var(--marquee-duration) linear var(--marquee-loop-count);
  --animate-marquee-right-rtl: marquee-right-rtl var(--marquee-duration) linear var(--marquee-loop-count);
  --animate-marquee-up: marquee-up var(--marquee-duration) linear var(--marquee-loop-count);
  --animate-marquee-down: marquee-down var(--marquee-duration) linear var(--marquee-loop-count);

@keyframes marquee-left {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(calc(-100% - var(--marquee-gap)));
  }
}

@keyframes marquee-right {
  0% {
    transform: translateX(calc(-100% - var(--marquee-gap)));
  }
  100% {
    transform: translateX(0%);
  }
}

@keyframes marquee-up {
  0% {
    transform: translateY(0%);
  }
  100% {
    transform: translateY(calc(-100% - var(--marquee-gap)));
  }
}

@keyframes marquee-down {
  0% {
    transform: translateY(calc(-100% - var(--marquee-gap)));
  }
  100% {
    transform: translateY(0%);
  }
}

@keyframes marquee-left-rtl {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(calc(100% + var(--marquee-gap)));
  }
}

@keyframes marquee-right-rtl {
  0% {
    transform: translateX(calc(100% + var(--marquee-gap)));
  }
  100% {
    transform: translateX(0%);
  }
}
}
```

</Step> </Steps>

Layout

Import the parts and compose them together.

import * as Marquee from "@/components/ui/marquee"

<Marquee.Root>
  <Marquee.Content>
    <Marquee.Item />
  </Marquee.Content>
  <Marquee.Edge side="left" />
  <Marquee.Edge side="right" />
</Marquee.Root>

Examples

Logo Showcase

Use the marquee to showcase logos or brands in a continuous scroll.

<ComponentTabs name="marquee-logo-demo" />

Vertical Layout

Use side to control the direction of the marquee.

<ComponentTabs name="marquee-vertical-demo" />

With RTL

The marquee component automatically adapts to RTL (right-to-left) layouts.

<ComponentTabs name="marquee-rtl-demo" />

API Reference

Marquee

The main marquee component that creates continuous scrolling animations.

<AutoTypeTable path="./types/docs/marquee.ts" name="MarqueeProps" />

<DataAttributesTable attributes={[ { title: "[data-orientation]", value: ["horizontal", "vertical"], }, ]} />

<CSSVariablesTable variables={[ { title: "--marquee-duration", description: "The duration of the marquee animation in seconds. Calculated based on content size and speed.", defaultValue: "Calculated dynamically (e.g., 20s)", }, { title: "--marquee-gap", description: "The gap between marquee items and repetitions.", defaultValue: "1rem", }, { title: "--marquee-delay", description: "The delay before the marquee animation starts in seconds.", defaultValue: "0s", }, { title: "--marquee-loop-count", description: "The number of times the animation should repeat. Can be a number or 'infinite'.", defaultValue: "infinite", }, ]} />

MarqueeContent

Contains the scrolling content and handles repetition for seamless animation.

<AutoTypeTable path="./types/docs/marquee.ts" name="MarqueeContentProps" />

<DataAttributesTable attributes={[ { title: "[data-orientation]", value: ["horizontal", "vertical"], }, ]} />

MarqueeItem

Individual items within the marquee content.

<AutoTypeTable path="./types/docs/marquee.ts" name="MarqueeItemProps" />

MarqueeEdge

Edge overlay components for smooth gradient transitions.

<AutoTypeTable path="./types/docs/marquee.ts" name="MarqueeEdgeProps" />

<DataAttributesTable attributes={[ { title: "[data-size]", value: ["default", "sm", "lg"], }, ]} />

Accessibility

Keyboard Interactions

<KeyboardShortcutsTable shortcuts={[ { keys: ["Space"], description: "Pauses or resumes the marquee animation when pauseOnKeyboard is enabled.", }, ]} />

Features

• RTL Support: Automatically adapts to RTL (right-to-left) layouts
• Screen Reader Support: Content remains accessible to assistive technologies
• Reduced Motion: Respects user's prefers-reduced-motion setting
• Pause Controls:
  • Hover: Can be configured to pause animation when hovered
  • Keyboard: Press Space key to pause/resume (when pauseOnKeyboard is enabled)
• Focus Management: Proper focus indicators and keyboard navigation when pauseOnKeyboard is enabled

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║