Testimonial grid

Installation

npx shadcn@latest add http://localhost:3000/r/testimonials-grid.json

MKT UI is not published yet, so this points at your local development server. Set NEXT_PUBLIC_REGISTRY_URL to the deployed origin to show the public command.

Also installs: container, section, section-heading, testimonial-card.

Usage

import { TestimonialsGrid } from "@/components/testimonials-grid";
import { RatingDisplay } from "@/components/rating-display";

<TestimonialsGrid
  eyebrow="Reviews"
  title="What customers say afterwards"
  summary={<RatingDisplay value={4.8} count={214} source="on Google" />}
  testimonials={[
    {
      id: "t1",
      quote: "Called at 7am with water coming through the ceiling. Someone was here before lunch.",
      author: "Maria O.",
      authorRole: "Crestview",
      rating: 5,
      sourceUrl: "https://example.com/review/1",
    },
  ]}
/>

Props

Prop	Type	Default	Description
title (required)	ReactNode	—	Section heading.
testimonials (required)	TestimonialItem[]	—	Each needs `id`, `quote`, and `author`.
summary	ReactNode	—	Aggregate rating or review count, shown under the heading.
columns	2 \| 3	3	Columns on wide screens.
align	"start" \| "center"	"start"	Heading alignment.
action	ReactNode	—	Action under the grid, e.g. "Read all reviews".
surface	"default" \| "muted" \| "brand" \| "inverted"	"default"	Background treatment.

TestimonialItem

Prop	Type	Default	Description
id (required)	string	—	Stable key.
quote (required)	ReactNode	—	What they said. Their words, including the awkward ones.
author (required)	string	—	Who said it. A first name and initial beats "A happy customer".
authorRole	ReactNode	—	Job, company, or location — whatever makes them relatable.
rating	number	—	Score out of five, if the quote came from a review.
avatar	{ src, alt }	—	Small photo. Cards are designed to look right without one.
sourceUrl	string	—	Link to the original review.

Each card is a figure containing a blockquote and a figcaption, which is the correct structure for a quotation with an attribution and the reason a screen reader announces the speaker as part of the quote rather than as loose text afterwards.

The grid is a list, so the count is announced before the quotes are read. Cards are equal height rather than masonry: a staggered layout looks livelier but makes quotes harder to compare, and comparing is what a visitor is doing here.

Link the review when it is public

sourceUrl exists because proof a visitor cannot check is just a claim. If your reviews live on Google or Yelp, link them.

Limitations

No carousel variant. A carousel hides most of your proof behind an interaction.
No rating breakdown or review-summary section yet.
Video testimonials are a separate, unimplemented section.