Marquee

A simple customizable marquee component with a variety of variants to choose from.

NOTE: This is a starting point for the Marquee component. You can customize it according to your needs, we are adding more variants as you read this guide, so stay tuned for more updates.

Examples

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 shadcn@latest add "https://aurora-ui-opal.vercel.app/c/marquee.json"

Component Props

You can customize the content of the Marquee by passing the following props:

PropTypeDefaultDescription
childrenReactNode-Content to be displayed inside the marquee.
classNamestring-Additional class names to be applied to the marquee.
variantdefault | destructive | successdefaultVariant of the marquee.
sizedefault | sm | lg | icondefaultSize of the marquee.
...propsany-Additional props to be passed to the marquee.