Testimonials
.mdWall of quote cards with initials avatars: two marquee rows drifting in opposite directions, or a masonry layout whose cards blur up into view.
testimonialsquotessocial proofmarqueemasonryreviews
Installation
$npx shadcn@latest add @geturui/testimonials-wall
Also installs: Marquee
Usage
usage.tsx
1import { TestimonialsWall } from "@/components/blocks/testimonials-wall";
2
3export default function Love() {
4 return (
5 <TestimonialsWall
6 variant="marquee"
7 testimonials={[
8 { quote: "We shipped our new onboarding in a week.", name: "Ana Ruiz", handle: "@anaruiz", role: "PM, Fieldnote", rating: 5 },
9 { quote: "The springs feel right out of the box.", name: "Kai Chen", handle: "@kaichen", role: "Design engineer" },
10 ]}
11 />
12 );
13}
Props
| Prop | Type | Default | Description |
|---|---|---|---|
testimonials | Testimonial[] | — | { quote, name, handle, role?, rating? }. Split into two rows for the marquee. |
variant | "marquee" | "masonry" | "marquee" | Opposing marquee rows, or a static masonry wall. |
duration | number | 48 | Seconds per marquee loop; the second row runs 6s slower. |
eyebrow / heading / subheading | string | — | Section copy. |
className | string | — | Classes for the outer section. |
Accessibility
- Quotes use figure, blockquote and figcaption; the marquee's duplicate copy is aria-hidden so each quote is read once.
- Star ratings are a single labelled image ("Rated 5 out of 5").
- Marquee pauses on hover and stops under reduced motion.