🤎 Enjoying my work? Buy me a coffee to support my coding adventures! ☕

Docs

Marquee

Marquee

An infinite scrolling component that can be used to display text, images, or videos.

Jack

@jack

I've never seen anything like this before. It's amazing. I love it.

Jill

@jill

I don't know what to say. I'm speechless. This is amazing.

John

@john

I'm at a loss for words. This is amazing. I love it.

Jack

@jack

I've never seen anything like this before. It's amazing. I love it.

Jill

@jill

I don't know what to say. I'm speechless. This is amazing.

John

@john

I'm at a loss for words. This is amazing. I love it.

Jack

@jack

I've never seen anything like this before. It's amazing. I love it.

Jill

@jill

I don't know what to say. I'm speechless. This is amazing.

John

@john

I'm at a loss for words. This is amazing. I love it.

Jack

@jack

I've never seen anything like this before. It's amazing. I love it.

Jill

@jill

I don't know what to say. I'm speechless. This is amazing.

John

@john

I'm at a loss for words. This is amazing. I love it.

Jane

@jane

I'm at a loss for words. This is amazing. I love it.

Jenny

@jenny

I'm at a loss for words. This is amazing. I love it.

James

@james

I'm at a loss for words. This is amazing. I love it.

Jane

@jane

I'm at a loss for words. This is amazing. I love it.

Jenny

@jenny

I'm at a loss for words. This is amazing. I love it.

James

@james

I'm at a loss for words. This is amazing. I love it.

Jane

@jane

I'm at a loss for words. This is amazing. I love it.

Jenny

@jenny

I'm at a loss for words. This is amazing. I love it.

James

@james

I'm at a loss for words. This is amazing. I love it.

Jane

@jane

I'm at a loss for words. This is amazing. I love it.

Jenny

@jenny

I'm at a loss for words. This is amazing. I love it.

James

@james

I'm at a loss for words. This is amazing. I love it.

Installation

npx nyxbui@latest add marquee

Add the following animations to your tailwind.config.ts file:

// tailwind.config.ts
module.exports = {
  theme: {
    extend: {
      animation: {
        marquee: "marquee var(--duration) linear infinite",
        "marquee-vertical": "marquee-vertical var(--duration) linear infinite",
      },
      keyframes: {
        marquee: {
          from: { transform: "translateX(0)" },
          to: { transform: "translateX(calc(-100% - var(--gap)))" },
        },
        "marquee-vertical": {
          from: { transform: "translateY(0)" },
          to: { transform: "translateY(calc(-100% - var(--gap)))" },
        },
      },
    },
  },
};

Examples

Vertical

Jack

@jack

I've never seen anything like this before. It's amazing. I love it.

Jack

@jack

I've never seen anything like this before. It's amazing. I love it.

Jack

@jack

I've never seen anything like this before. It's amazing. I love it.

Jack

@jack

I've never seen anything like this before. It's amazing. I love it.

Jill

@jill

I don't know what to say. I'm speechless. This is amazing.

John

@john

I'm at a loss for words. This is amazing. I love it.

Jill

@jill

I don't know what to say. I'm speechless. This is amazing.

John

@john

I'm at a loss for words. This is amazing. I love it.

Jill

@jill

I don't know what to say. I'm speechless. This is amazing.

John

@john

I'm at a loss for words. This is amazing. I love it.

Jill

@jill

I don't know what to say. I'm speechless. This is amazing.

John

@john

I'm at a loss for words. This is amazing. I love it.

3D

Microsoft

Apple

Google

Microsoft

Apple

Google

Microsoft

Apple

Google

Microsoft

Apple

Google

Props

Prop	Type	Default	Description
className	string		The class name to apply to the component.
reverse	boolean	false	Whether or not to reverse the direction of the marquee.
pauseOnHover	boolean	false	Whether or not to pause the marquee when the user hovers over the component.
vertical	boolean	false	Whether or not to display the marquee vertically.
children	node		The content to display in the marquee.
repeat	number	1	The number of times to repeat the content.