Testimonial marquee

Two rows of testimonial cards drifting in opposite directions with faded edges. Rows pause on hover or focus, and a Pause button stops them for everyone else.

Interaction Type

A labelled section landmark with two rows of quotes drifting in opposite directions, with soft faded edges. A row stops while it is hovered or holds focus, and a Pause button stops both rows for keyboard and touch users. The looping copies are aria-hidden and inert, so screen readers and Tab meet each quote once. The direction follows RTL. Reduced motion removes the motion and the pause button and sets the quotes as a static grid.

Props

Options you can pass to customize this component.

Prop

Type

Description

title

ReactNode

Section heading, left aligned.

description

ReactNode

One short line under the heading.

testimonials

{ quote: string; name: string; role: string }[]

Quotes with the person and their role. Each card shows a generated NameAvatar next to the name, so no photos are needed. The list is split in half, one half per row.

pauseLabel, playLabel

string

Labels of the pause toggle in each state, overridable for localization.

Installation

npx shadcn@latest addhttps://ui.nexvyn.dev/r/social-proof-testimonials-marquee.json

How to use

<SocialProofTestimonialsMarquee
  title="In their words"
  testimonials={[
    { quote: 'Setup took one afternoon.', name: 'Ada Park', role: 'CTO, Brightfold' },
    { quote: 'Dark mode just worked.', name: 'Leo Marsh', role: 'Designer, Tallow' },
  ]}
/>

Source Code

Click the code icon in the top-right corner to view the source code.

Contact

Questions or feedback? Reach out anytime.

License & Usage

•Free for personal and commercial use
•No attribution required
•Cannot be resold as a standalone product
•Anatomy/blueprint diagrams are licensed separately (CC BY-NC 4.0) and are not for commercial use

// No code loaded.

acme.app

In their words

Short notes from teams building with Nexvyn UI components and blocks.

We copied the dialog source into our repo and changed two tokens. It matched the rest of our product on the first try, in both themes.
Ruth AbaraFrontend lead, Quillfern
Keyboard support is the part I usually rebuild by hand. Arrow keys, Escape and focus return already worked, so I spent the week on our actual product.
Tomas LindqvistDesign engineer, Pellmark
I am not a designer and our marketing site still looks calm. Dark mode came along for free because everything reads from tokens.
Amara OseiFounder, Tindra
We copied the dialog source into our repo and changed two tokens. It matched the rest of our product on the first try, in both themes.
Ruth AbaraFrontend lead, Quillfern
Keyboard support is the part I usually rebuild by hand. Arrow keys, Escape and focus return already worked, so I spent the week on our actual product.
Tomas LindqvistDesign engineer, Pellmark
I am not a designer and our marketing site still looks calm. Dark mode came along for free because everything reads from tokens.
Amara OseiFounder, Tindra

We copied the dialog source into our repo and changed two tokens. It matched the rest of our product on the first try, in both themes.
Ruth AbaraFrontend lead, Quillfern
Keyboard support is the part I usually rebuild by hand. Arrow keys, Escape and focus return already worked, so I spent the week on our actual product.
Tomas LindqvistDesign engineer, Pellmark
I am not a designer and our marketing site still looks calm. Dark mode came along for free because everything reads from tokens.
Amara OseiFounder, Tindra
We copied the dialog source into our repo and changed two tokens. It matched the rest of our product on the first try, in both themes.
Ruth AbaraFrontend lead, Quillfern
Keyboard support is the part I usually rebuild by hand. Arrow keys, Escape and focus return already worked, so I spent the week on our actual product.
Tomas LindqvistDesign engineer, Pellmark
I am not a designer and our marketing site still looks calm. Dark mode came along for free because everything reads from tokens.
Amara OseiFounder, Tindra

Reviews got shorter. It is plain React and Tailwind, so nobody had to learn a new library to read the diff.
Daniel FerreiraEngineering manager, Mossline
The motion is quiet and it already respects reduced motion. Our accessibility audit came back with notes on our own code, not on these parts.
Lena HoffmannProduct designer, Harrowgate Bikes
I needed a pricing section and a login by Friday. Two blocks, one afternoon, and the source is mine to change.
Sam OkoroSolo developer, Ostrander Print
Reviews got shorter. It is plain React and Tailwind, so nobody had to learn a new library to read the diff.
Daniel FerreiraEngineering manager, Mossline
The motion is quiet and it already respects reduced motion. Our accessibility audit came back with notes on our own code, not on these parts.
Lena HoffmannProduct designer, Harrowgate Bikes
I needed a pricing section and a login by Friday. Two blocks, one afternoon, and the source is mine to change.
Sam OkoroSolo developer, Ostrander Print

Reviews got shorter. It is plain React and Tailwind, so nobody had to learn a new library to read the diff.
Daniel FerreiraEngineering manager, Mossline
The motion is quiet and it already respects reduced motion. Our accessibility audit came back with notes on our own code, not on these parts.
Lena HoffmannProduct designer, Harrowgate Bikes
I needed a pricing section and a login by Friday. Two blocks, one afternoon, and the source is mine to change.
Sam OkoroSolo developer, Ostrander Print
Reviews got shorter. It is plain React and Tailwind, so nobody had to learn a new library to read the diff.
Daniel FerreiraEngineering manager, Mossline
The motion is quiet and it already respects reduced motion. Our accessibility audit came back with notes on our own code, not on these parts.
Lena HoffmannProduct designer, Harrowgate Bikes
I needed a pricing section and a login by Friday. Two blocks, one afternoon, and the source is mine to change.
Sam OkoroSolo developer, Ostrander Print

npx shadcn@latest addhttps://ui.nexvyn.dev/r/social-proof-testimonials-marquee.json