Dice UI

Kickflip

A kickflip is a trick where you kick the board forward while jumping, and then land on the board with the other foot.

Heelflip

A heelflip is a trick where you flip the board backwards while jumping, and then land on the board with the other foot.

Tre Flip

A tre flip is a trick where you flip the board sideways while jumping, and then land on the board with the other foot.

FS 540

A fs 540 is a trick where you flip the board 540 degrees while jumping, and then land on the board with the other foot.

360 Varial McTwist

A 360 varial mc twist is a trick where you flip the board 360 degrees while jumping, and then land on the board with the other foot.

Kickflip

A kickflip is a trick where you kick the board forward while jumping, and then land on the board with the other foot.

Heelflip

A heelflip is a trick where you flip the board backwards while jumping, and then land on the board with the other foot.

Tre Flip

A tre flip is a trick where you flip the board sideways while jumping, and then land on the board with the other foot.

FS 540

A fs 540 is a trick where you flip the board 540 degrees while jumping, and then land on the board with the other foot.

360 Varial McTwist

A 360 varial mc twist is a trick where you flip the board 360 degrees while jumping, and then land on the board with the other foot.

Installation

pnpm dlx shadcn@latest add "@diceui/marquee"

Layout

Import the parts and compose them together.

import * as Marquee from "@/components/ui/marquee"
 
return (
  <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.

Vertical Layout

Use side to control the direction of the marquee.

Alex Johnson

Frontend Developer at TechCorp

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

Sarah Chen

Design Lead at StartupXYZ

"Beautiful components that are easy to customize. Our design system has never looked better."

Michael Rodriguez

Full Stack Engineer at WebSolutions

"The accessibility features built into these components saved us weeks of development time."

Emily Davis

Product Manager at InnovateLab

"Our team productivity increased significantly after adopting this component library."

David Kim

Senior Developer at CodeCraft

"Clean, modern components with excellent TypeScript support. Highly recommended!"

Lisa Thompson

UI/UX Designer at DesignStudio

"The design tokens and theming system make it incredibly easy to maintain brand consistency."

Alex Johnson

Frontend Developer at TechCorp

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

Sarah Chen

Design Lead at StartupXYZ

"Beautiful components that are easy to customize. Our design system has never looked better."

Michael Rodriguez

Full Stack Engineer at WebSolutions

"The accessibility features built into these components saved us weeks of development time."

Emily Davis

Product Manager at InnovateLab

"Our team productivity increased significantly after adopting this component library."

David Kim

Senior Developer at CodeCraft

"Clean, modern components with excellent TypeScript support. Highly recommended!"

Lisa Thompson

UI/UX Designer at DesignStudio

"The design tokens and theming system make it incredibly easy to maintain brand consistency."

With RTL

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

RTL Support

Automatic right-to-left layout support with proper animation direction and gap handling.

Smooth Animation

Seamless scrolling animation that adapts to text direction without any visual gaps.

Auto Fill

Intelligent content duplication to fill the available space for continuous scrolling.

Pause on Hover

Interactive animation that pauses when users hover over the content for better UX.

Responsive Design

Fully responsive component that works perfectly across all device sizes and orientations.

RTL Support

Automatic right-to-left layout support with proper animation direction and gap handling.

Smooth Animation

Seamless scrolling animation that adapts to text direction without any visual gaps.

Auto Fill

Intelligent content duplication to fill the available space for continuous scrolling.

Pause on Hover

Interactive animation that pauses when users hover over the content for better UX.

Responsive Design

Fully responsive component that works perfectly across all device sizes and orientations.

API Reference

Marquee

The main marquee component that creates continuous scrolling animations.

Prop

Type

Data Attribute	Value
`[data-orientation]`	`"horizontal" \| "vertical"`

CSS Variable	Description	Default
`--marquee-duration`	The duration of the marquee animation in seconds. Calculated based on content size and speed.	`Calculated dynamically (e.g., 20s)`
`--marquee-gap`	The gap between marquee items and repetitions.	`1rem`
`--marquee-delay`	The delay before the marquee animation starts in seconds.	`0s`
`--marquee-loop-count`	The number of times the animation should repeat. Can be a number or 'infinite'.	`infinite`

MarqueeContent

Contains the scrolling content and handles repetition for seamless animation.

Prop

Type

Data Attribute	Value
`[data-orientation]`	`"horizontal" \| "vertical"`

MarqueeItem

Individual items within the marquee content.

Prop

Type

MarqueeEdge

Edge overlay components for smooth gradient transitions.

Prop

Type

Data Attribute	Value
`[data-size]`	`"default" \| "sm" \| "lg"`

Accessibility

Keyboard Interactions

Key	Description
`Space`	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

Marquee

On this page