shadcn.io is not affiliated with official shadcn/ui
Hybrid Quote Metric Bento Logos Block for React
A bento of five customers for a payments product: a flagship story across two columns beside four cells that alternate between a quote and a big figure, each led by the customer's wordmark.
Installation
Overview
A customer-proof bento for React with Base UI. Under a compact header with one Shine Button, a grid of cells shares its hairlines from rail to rail. The flagship spans two columns: the customer's wordmark on a plate, an industry badge, a figure at display size, a quote whose first sentence is set in the text colour, and who said it. Beside it four smaller cells alternate in a checkerboard, a quote, then a figure, then a figure, then a quote, and every one of them opens with the customer's wordmark, so the logos stay the subject and the block never reads as a testimonials wall. The grid's top rule meets the rails at + marks and the grid ends the block. It's built from Guides, Shine Button, Badge and Avatar, with CSS transitions for the entrance and your theme's tokens for every colour. For payments, infrastructure and any product that wants one hero story and a spread of smaller proofs.
FAQ
How do I change the customers and what they say?
Edit FLAGSHIP and PROOFS at the top of the file. A flagship has a customer (an icon, its lettering, the way the icon sits beside the name, and the name), a figure and its label, a quote with its opening sentence in quoteLead, and a person. Each entry in PROOFS has a kind of quote or figure and fills the grid in order, so alternate the kinds to keep the checkerboard.
Can I use real logos?
Yes. The names and icons are fictional: a wordmark is a Lucide icon beside a name set in its own lettering, all in currentColor. Replace the Wordmark helper's contents with your own SVG, keep the name as text for screen readers, and keep the dir="ltr" on it so artwork is never mirrored on a right-to-left page.
Where does the button go?
It's a link (href="#"): point Read the customer stories at your case-study index. It's the block's only primary control, and it sits first in the header so it is first in the tab order.
The button renders the link it's given with render, with nativeButton={false}.
How is it marked up for screen readers?
The cells are items of one list. A quote is a figure with a blockquote and a figcaption naming the person; a figure is a term and its description, with the label read first and the number after it. Initials in the avatars are hidden from assistive technology because the name is next to them. Figures with a sign or a unit sit in bdi elements, so a right-to-left layout keeps "99.99%" in reading order.
Does it follow my theme?
Yes. Nothing is a fixed colour: cells are the page background on shared hairlines, the flagship's plate is a muted tile with a faint ring, and primary appears only on the Shine Button. Light and dark, any preset and either radius work without changes.
How does it fit on a phone?
The flagship comes first and spans the full width. The four smaller cells follow in pairs, two to a row, with their padding stepped down, and the wordmarks and figures are sized to fit a 320 pixel screen. Nothing scrolls sideways, and with reduced motion the entrance is off and the section simply appears.
Related
- Pro
A bento for an on-call alert router: one tall customer story with a big result, a quote and a link, beside four customers that each carry an industry pill and a retention figure, in cells that share their hairlines.
- Pro
A bento for brewery inventory software: a full-width featured story laid out as a row, over a second band of three customers divided by hairlines.
- Pro
Quote Cards Bento Logos
BentosFour customer quotes for a drone imaging service in cards that stand apart, each led by the customer's wordmark with its result as a chip, then two lines of quote and who said it.
- Pro
Metric Cards Bento Logos
BentosSix customer results for an invoice-financing product in two bands of cells, each with the customer's wordmark, a figure at display size, what it counts and a chip with the change since last year.
- Pro
Three customer stories of equal weight for a headless CMS, each a whole case study in its own column: a wordmark plate, an industry pill, a big figure, a two-line quote and who said it.
- Pro
Bento Grid Testimonials
Quote gridsA quote-only bento drawn with hairlines: one large lead story beside four shorter quotes, in cells that share their lines, on the page's drafting lines.