asafefe.dev

Testimonial Marquee

New

Rows of quote cards drifting in opposite directions. Pauses on hover, initials when there is no photo.

utils@soultel/marquee
“We moved billing over in an afternoon and never looked back.”
Maya ChenCTO at Northwind
“The analytics alone paid for the yearly plan in a month.”
Priya RamanGrowth at Lumen
“Finally a dashboard my whole team actually opens.”
Sofia MarinOps lead, Parcel
“Support answers before I finish typing the question.”
Leo ParkFounder, Tilde
“Our onboarding drop off fell by a third after the switch.”
Daniel OkaforPM at Fieldnote
“Setup took ten minutes. The docs are that good.”
Jonas WeberEngineer at Kite

Installation

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

No namespace set up? npx shadcn@latest add https://asafefe.dev/r/testimonial-marquee.json works too.

Manual installation
  1. 1. Copy the source from the Code tab into components/testimonial-marquee.tsx.

Usage

example.tsx12 lines
import { TestimonialMarquee } from "@/components/testimonial-marquee"

export function Testimonials() {
  return (
    <TestimonialMarquee
      testimonials={[
        { quote: "We moved billing over in an afternoon.", name: "Maya Chen", title: "CTO at Northwind" },
        { quote: "Support answers before I finish typing.", name: "Leo Park", title: "Founder, Tilde" },
      ]}
    />
  )
}

Props

PropTypeDefaultDescription
testimonialsTestimonial[]-quote, name, title, and an optional avatar URL.
rowsnumber2Number of rows. Every other row runs in reverse.
speednumber45Seconds for one loop of the first row.