Marquee

A widget that scrolls its content horizontally or vertically when it overflows the available space.

Preview

React
Vue
Angular
Svelte
Next.js
Nuxt
Astro
SvelteKit
Remix
Solid

Builder

Speed
Orientation
Gap
Behavior
Visual Effects

The component accepts the following props:

Prop
Type
Default
Title

Description Error

No data

There are no records to display

Usage

The Marquee component can be used in two ways:

  1. Using children (recommended): Simply place your content as children of the Marquee component. This is the simplest approach.
  2. Using items array: Pass an array of items with id and content snippets. This is useful when you need more control over individual items.

MarqueeItem Type

When using the items array, each item should follow this structure:

The component accepts the following props:

Prop
Type
Default
Title

Description Error

No data

There are no records to display

Behavior

The Marquee component automatically detects when content overflows and starts the scrolling animation. If the content fits within the available space, no animation occurs. This ensures optimal performance and prevents unnecessary animations.