Testimonials
ProQuotes from customers: TestimonialHighlight for the one that matters most, large and centered, and TestimonialWall for many short ones in columns.
npx prodular-ui add testimonialsPart of Prodular UI Pro. Preview and read the docs freely, install with a license. See pricing
A wall
Three quotes in columns. The SaaS landing block pairs a highlight with a wall of six.
The reminders read like our team wrote them.
Approvals used to live in Slack threads. Now they live next to the payout, with the audit trail.
Reconciliation went from a week to an afternoon.
import { TestimonialWall } from "@/components/ui/testimonials"
export default function TestimonialsWall() { return ( <TestimonialWall className="w-full" testimonials={[ { quote: "The reminders read like our team wrote them.", name: "Theo Lindqvist", role: "Head of finance", company: "Northwind", initials: "TL" }, { quote: "Approvals used to live in Slack threads. Now they live next to the payout, with the audit trail.", name: "Hana Sato", role: "Finance lead", company: "Meridian", initials: "HS" }, { quote: "Reconciliation went from a week to an afternoon.", name: "Maya Okafor", role: "CFO", company: "Halcyon Labs", initials: "MO" }, ]} /> )}Anatomy
<TestimonialHighlight testimonial={featured} /><TestimonialWall testimonials={quotes} />Guidance
Use it when
- Proof from named people with roles.
- One highlight and a wall of three to nine.
Avoid
- Quotes you made up or edited beyond recognition.
- Star ratings without names.
Rules for AI agents
Published in llms-full.txt, the registry and the MCP server, so coding agents follow them when they build with this component.
- Pass { quote, name, role, company?, avatar?, initials?, logo? }. Quotes in the wall stay under about 40 words.
- Only use real quotes with permission; demos use fictional people.
API
TestimonialHighlight
| Prop | Type | Default | Description |
|---|---|---|---|
| testimonial | Testimonial | One large quote. |
TestimonialWall
| Prop | Type | Default | Description |
|---|---|---|---|
| testimonials | Testimonial[] | Many short quotes. |
Installation
The Prodular UI CLI adds the source to components/ui with everything it depends on. In a project that already uses shadcn/ui, the shadcn CLI installs it from the Prodular registry too. See Installation for the first setup.
npx prodular-ui add testimonials# or, with the registry in components.jsonnpx shadcn@latest add @prodular/testimonials