Docs/Testimonial Marquee

Testimonial Marquee

A smooth, infinite scrolling marquee component for showcasing social proof and testimonials. Features micro-interactions, multiple layout variants, and seamless looping.

Installation

$pnpm dlx shadcn@latest add @componentry/testimonial-marquee

Usage

API Reference

PropTypeDefault
itemsArray of Testimonial objects (name, text, avatar, username?, role?, profileLink?)
Testimonial[]—
variantLayout variant: 'default' | 'stacked' | 'dual' | 'flush' | 'flush-dual'
stringdefault
speedAnimation speed in seconds. Higher is slower.
number30
containerClassNameOptional class name for the inner container.
string—

Click on the icon in the top right of the example preview to view the source code for specific variants.

Keep in mind

This component is inspired by various open-source projects and patterns. Please verify licenses and implementation details before using in production.

Have any questions?
Contact on@harshjdhv

"This library has completely transformed how we build our UI. The animations are so smooth!"

Sarah Chen
Sarah Chen@sarahchen

"The best developer experience I've had in years. Highly recommended for any React project."

Alex Morgan
Alex Morgan@alexm

"Incredible attention to detail. The micro-interactions are subtle but impactful."

David Kim
David Kim@davidkim

"Just copy and paste instantly. It's like magic for your frontend workflow."

Emily Watson
Emily Watson@emilyw

"I've tried many UI libraries, but Componentry stands out for its premium feel."

James Wilson
James Wilson@jamesw

"The stacked variant is exactly what I needed for my landing page's social proof section."

Lisa Park
Lisa Park@lisap

"This library has completely transformed how we build our UI. The animations are so smooth!"

Sarah Chen
Sarah Chen@sarahchen

"The best developer experience I've had in years. Highly recommended for any React project."

Alex Morgan
Alex Morgan@alexm

"Incredible attention to detail. The micro-interactions are subtle but impactful."

David Kim
David Kim@davidkim

"Just copy and paste instantly. It's like magic for your frontend workflow."

Emily Watson
Emily Watson@emilyw

"I've tried many UI libraries, but Componentry stands out for its premium feel."

James Wilson
James Wilson@jamesw

"The stacked variant is exactly what I needed for my landing page's social proof section."

Lisa Park
Lisa Park@lisap

"This library has completely transformed how we build our UI. The animations are so smooth!"

Sarah Chen
Sarah Chen@sarahchen

"The best developer experience I've had in years. Highly recommended for any React project."

Alex Morgan
Alex Morgan@alexm

"Incredible attention to detail. The micro-interactions are subtle but impactful."

David Kim
David Kim@davidkim

"Just copy and paste instantly. It's like magic for your frontend workflow."

Emily Watson
Emily Watson@emilyw

"I've tried many UI libraries, but Componentry stands out for its premium feel."

James Wilson
James Wilson@jamesw

"The stacked variant is exactly what I needed for my landing page's social proof section."

Lisa Park
Lisa Park@lisap

"This library has completely transformed how we build our UI. The animations are so smooth!"

Sarah Chen
Sarah Chen@sarahchen

"The best developer experience I've had in years. Highly recommended for any React project."

Alex Morgan
Alex Morgan@alexm

"Incredible attention to detail. The micro-interactions are subtle but impactful."

David Kim
David Kim@davidkim

"Just copy and paste instantly. It's like magic for your frontend workflow."

Emily Watson
Emily Watson@emilyw

"I've tried many UI libraries, but Componentry stands out for its premium feel."

James Wilson
James Wilson@jamesw

"The stacked variant is exactly what I needed for my landing page's social proof section."

Lisa Park
Lisa Park@lisap
import { TestimonialMarquee } from "@/components/ui/testimonial-marquee"

const items = [
  {
    name: "Sarah Chen",
    username: "sarahchen",
    text: "This library has completely transformed how we build our UI. The animations are so smooth!",
    avatar: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=150&h=150&fit=crop&crop=faces",
  },
  // ... other items
]

export function TestimonialMarqueeDemo() {
  return (
    <div className="relative w-full overflow-hidden rounded-xl border bg-background/50">
      <TestimonialMarquee items={items} />
    </div>
  )
}