Testimonial Wall
NewPro
A wall of customer quotes in two columns that scroll slowly in opposite directions and stop on hover. Ships with sample quotes and a notice until you pass real ones.
Customize
#ff784f
18px/s
Pause on hover
When to use it
- Social proof on a landing page, right before the pricing section
- A reviews or wall of love page for a product or a game
- The quotes behind a case study or a press page
Good to know
- Plan
- Pro
- Dependencies
- motion
- Rendering
- DOM and CSS
- Reduced motion
- Respected
- Lines of code
- 292
Installation
Testimonial Wall is part of Pro. After purchase you're invited to the private mekai-ui/mekai-ui-pro GitHub repository: copy testimonial-wall.tsx into components/ui and run npm install motion.
Usage
import { TestimonialWall } from "@/components/ui/testimonial-wall";
<TestimonialWall
eyebrow="Customers"
title="Teams who switched"
testimonials={[
{
quote: "We moved our launch checklist here in a week.",
name: "A real customer",
role: "Their role, their company",
rating: 5,
featured: true,
},
// Six or more quotes fill the wall best.
]}
/>Props
12 properties| Property | Type | Default | Description |
|---|---|---|---|
| testimonials | Testimonial[] | SAMPLE_TESTIMONIALS | Your customers' quotes: quote, name, and optional role, avatar, rating and featured. The default names are invented, and a notice stays on screen until you pass your own. |
| title | string | — | Section heading. |
| eyebrow | string | — | Short line above the heading. |
| subtitle | string | — | Supporting line under the heading. |
| summary | string | — | Short line next to the avatars under the heading, such as a rating. |
| cta | { label: string; href: string } | — | Link under the heading. |
| speed | number | 18 | Scroll speed in pixels per second. |
| pauseOnHover | boolean | true | Ease to a stop while the pointer is on the wall. |
| showPauseButton | boolean | true | Shows the button that stops the motion for good, which keyboard and touch users need. |
| color | string | "#ff784f" | Accent for the stars, avatars and featured cards, as a hex value. |
| as | "h1" | "h2" | "h2" | Heading level. Use "h1" when this is the whole page. |
| className | string | — | Extra classes for the section. |
Dependencies: motion