shadcn.io is not affiliated with official shadcn/ui
Hybrid Quote Metric Bento Logos Block for React Aria
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 React Aria. 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 a link when it has an href.
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.