Testimonial Marquee

A smooth, infinite scrolling marquee component perfect for testimonials with dual rows moving in opposite directions and gradient edge fading.

Preview

Installation

Install the component using the CLI.

npx shadcn@latest add https://siddz.com/r/marquee.json

Usage

Import the component:

import { TestimonialMarquee, Marquee, TestimonialCard } from "@/components/marquee"

Use it in your code:

const testimonials = [
  { name: "John Doe", username: "@johndoe", content: "Amazing product!" },
  { name: "Jane Smith", username: "@janesmith", content: "Love it!" },
];

<TestimonialMarquee 
  test...

Props

Property	Type	Default	Description
`testimonials*`	`array`	`-`	Array of testimonial objects with name, username, content, and optional avatar.
`speed`	`number`	`40`	Animation duration in seconds. Lower = faster.
`pauseOnHover`	`boolean`	`true`	Whether to pause the marquee on hover.
`className`	`string`	`""`	Additional CSS classes.

Preview

Jake Miller@jakemiller

Just adopted a cat. Named her 'Prod' now she crashes everytime i touch it. Perfect name honestly.

Emma Wilson@emmawilson

My coffee machine broke this morning. Had to talk to people like a normal human. Worst day of my life.

Chris Taylor@christaylor

Told my mom I fix computers for a living. Now I'm the entire family's IT support. What have I done.

Sarah Park@sarahpark

My plant finally died after 3 years. Survived two apartment moves and a pandemic. RIP Gerald the fern.

Jake Miller@jakemiller

Just adopted a cat. Named her 'Prod' now she crashes everytime i touch it. Perfect name honestly.

Emma Wilson@emmawilson

My coffee machine broke this morning. Had to talk to people like a normal human. Worst day of my life.

Chris Taylor@christaylor

Told my mom I fix computers for a living. Now I'm the entire family's IT support. What have I done.

Sarah Park@sarahpark

My plant finally died after 3 years. Survived two apartment moves and a pandemic. RIP Gerald the fern.

Jake Miller@jakemiller

Just adopted a cat. Named her 'Prod' now she crashes everytime i touch it. Perfect name honestly.

Emma Wilson@emmawilson

My coffee machine broke this morning. Had to talk to people like a normal human. Worst day of my life.

Chris Taylor@christaylor

Told my mom I fix computers for a living. Now I'm the entire family's IT support. What have I done.

Sarah Park@sarahpark

My plant finally died after 3 years. Survived two apartment moves and a pandemic. RIP Gerald the fern.

Jake Miller@jakemiller

Just adopted a cat. Named her 'Prod' now she crashes everytime i touch it. Perfect name honestly.

Emma Wilson@emmawilson

My coffee machine broke this morning. Had to talk to people like a normal human. Worst day of my life.

Chris Taylor@christaylor

Told my mom I fix computers for a living. Now I'm the entire family's IT support. What have I done.

Sarah Park@sarahpark

My plant finally died after 3 years. Survived two apartment moves and a pandemic. RIP Gerald the fern.

Mike Chen@mikechen

Bought noise canceling headphones. Now I can ignore people in high definition quality. Best purchase ever.

Lisa Brown@lisabrown

My wifi password is 32 characters long because I hate when visitors ask for it. Working as intended.

David Kim@davidkim

Started going to the gym this year. By gym I mean the fridge. Great progress so far, highly recommend.

Amy Zhang@amyzhang

My uber rating is 4.2 stars because I refuse to make small talk. It is totally worth it in my opinion.

Mike Chen@mikechen

Bought noise canceling headphones. Now I can ignore people in high definition quality. Best purchase ever.

Lisa Brown@lisabrown

My wifi password is 32 characters long because I hate when visitors ask for it. Working as intended.

David Kim@davidkim

Started going to the gym this year. By gym I mean the fridge. Great progress so far, highly recommend.

Amy Zhang@amyzhang

My uber rating is 4.2 stars because I refuse to make small talk. It is totally worth it in my opinion.

Mike Chen@mikechen

Bought noise canceling headphones. Now I can ignore people in high definition quality. Best purchase ever.

Lisa Brown@lisabrown

My wifi password is 32 characters long because I hate when visitors ask for it. Working as intended.

David Kim@davidkim

Started going to the gym this year. By gym I mean the fridge. Great progress so far, highly recommend.

Amy Zhang@amyzhang

My uber rating is 4.2 stars because I refuse to make small talk. It is totally worth it in my opinion.

Mike Chen@mikechen

Bought noise canceling headphones. Now I can ignore people in high definition quality. Best purchase ever.

Lisa Brown@lisabrown

My wifi password is 32 characters long because I hate when visitors ask for it. Working as intended.

David Kim@davidkim

Started going to the gym this year. By gym I mean the fridge. Great progress so far, highly recommend.

Amy Zhang@amyzhang

My uber rating is 4.2 stars because I refuse to make small talk. It is totally worth it in my opinion.

Usage

Import the component:

import { TestimonialMarquee, Marquee, TestimonialCard } from "@/components/marquee"

Use it in your code:

const testimonials = [
  { name: "John Doe", username: "@johndoe", content: "Amazing product!" },
  { name: "Jane Smith", username: "@janesmith", content: "Love it!" },
];

<TestimonialMarquee 
  test...

Property

Type

Default

Description

testimonials*

array

-

Array of testimonial objects with name, username, content, and optional avatar.

speed

number

40

Animation duration in seconds. Lower = faster.

pauseOnHover

boolean

true

Whether to pause the marquee on hover.

className

string

""

Additional CSS classes.