React Bento Grid Testimonials Led by a Customer Metric

Pro

A testimonial grid of four cards in different sizes: a tall card on the left leads with a big number such as 5X and the quote behind it, a wide card and two compact cards fill the right, and the last one flips to dark. A rating row with five stars and a link to more reviews closes the section.

Numbers first, then the people who said them

Social Proof Section with Metric Bento Grid is a React and Tailwind CSS testimonials section laid out as a bento grid, where one headline customer metric takes the largest card and three supporting testimonials and an overall rating fill the rest. It runs in Next.js or any React app in light and dark.

In most testimonials design, a wall gives every quote the same weight, which flattens your best result. A bento layout lets one outcome, a number a customer can stand behind, take the biggest card, while the smaller cards add breadth: other roles, other companies, other reasons. Varying the card sizes also keeps the section from reading as a template.

The block is a layout, not a source of proof. Every number, name and logo in the default content is sample material, and the section only works when each card is a real customer who agreed to be quoted.

The four slots and the footer

Featured card

Tall, on the left: a large metric, a short metric label, the quote, and the person's avatar, name and role.

Wide card

Top right, spanning two columns, for a longer quote that does not need a number.

Compact card

A short quote with a person row, under the wide card.

Inverted card

The fourth slot swaps to dark on a light page and light on a dark page, closing the grid with contrast.

Company marks

Cards can show a company mark chosen from a small built in set. The set includes real company logos, which is why it needs care.

Rating row

A clients line, five decorative stars, a rating with a caption, and a link to the full set of reviews.

When bento grid testimonials work

Use it when

You have one strong, measurable outcome a named customer will vouch for.
Three more quotes from different roles or industries round it out.
You have a real public rating, for example from a review site, with a link to it.
Your page already uses card layouts and you want the proof to match.

Skip it when

You have no customers who can be named yet. Empty or invented proof does more harm than no section.
Your quotes are long; the compact slots suit one or two sentences.
You need more than four testimonials. Extra quotes are ignored.
You need your own customers' logos on the cards and cannot edit the file.

Replace every piece of sample proof

quotes is read by position: the first is the featured card, the second the wide card, the third the compact card and the fourth the inverted card. Give the first a metric and metricLabel. Each quote has an id, quote, name, role, avatar and optional company and inverted fields.

The defaults include a quote attributed to a director at a large search company with that company's logo, a count of product teams and a rating from a number of reviews. All of it is placeholder. Replace clientsLabel, rating and ratingCaption with figures you can source, point reviewsHref at the page where those reviews live, and add your own logos to the company mark map in the file rather than using the built in ones.

npx wensity@latest add social-proof-section-with-metric-bento-grid --type block

page.tsx

import { MetricBentoSocialProof } from "@/components/wensity/blocks/social-proof-section-with-metric-bento-grid";

export function Proof() {
  return (
    <MetricBentoSocialProof
      headline="What changed for our customers"
      clientsLabel="Used by finance teams in 14 countries"
      rating="4.7"
      ratingCaption="Average on our public review page"
      reviewsHref="https://example.com/reviews"
      quotes={[
        { id: "a", metric: "3 days", metricLabel: "to close the month", quote: "We used to need two weeks.", name: "Priya Shah", role: "Controller, Northline", avatar: "/people/priya.jpg" },
        { id: "b", quote: "The audit trail answered questions before our auditors asked them.", name: "Tom Becker", role: "CFO, Larkspur", avatar: "/people/tom.jpg" },
        { id: "c", quote: "Setup took an afternoon.", name: "Ana Ruiz", role: "Ops lead, Fenwick", avatar: "/people/ana.jpg" },
        { id: "d", quote: "Support replies within the hour.", name: "Li Wei", role: "Accountant, Calder", avatar: "/people/li.jpg", inverted: true },
      ]}
    />
  );
}

Props

Prop	Type	Default	Description
`quotes`	{ id; quote; name; role; avatar; metric?; metricLabel?; inverted?; company? }[]	-	Four quotes in slot order: featured, wide, compact, inverted.
`clientsLabel`	string	-	The line beside the rating. Use a number you can prove, or a plain statement.
`rating / ratingCaption`	string	"4.8" / "From 980 verified reviews"	Your real average and where it comes from.
`reviewsLabel / reviewsHref`	string	-	Link to the full set of reviews, ideally on a third party site.
`eyebrow / headline / subheadline / description`	string	-	Copy above the grid. The eyebrow sits in corner brackets.

Content rules and accessibility

Sample proof ships by default

Names, metrics, ratings and the real company marks in the defaults are placeholders. Publishing them unchanged would be a false claim.

Avatars are decorative

Avatar images have empty alt text because the name is printed beside them.

Stars are hidden

The five stars are aria-hidden, and the rating number and caption carry the meaning for screen readers.

No animation

No state and no motion, so the section can render on the server and needs no reduced motion handling.

Two palettes

Warm off white in light mode and near black in dark mode.

Block details

Social Proof Section With Metric Bento Grid

Category: Social Proof Sections
Renders: CSS only. Paints as soon as the stylesheet arrives
Theme: Follows the site theme in light and dark
Dependencies: clsxtailwind-merge
Source: 413 lines, 13 KB in one file
Install: wensity add social-proof-section-with-metric-bento-grid --type block
Tags: light, dark, testimonials, bento, metrics, reviews, saas
Last updated: October 14, 2026