shadcn.io is not affiliated with official shadcn/ui
Multi-Format Testimonials Bento Block for React
A bento of four proof formats in cells of their own, each named by a corner badge: a featured quote, a metric, a voice note and a video, under a compact header with a Shine Button.
Installation
Overview
A testimonials section that shows four kinds of proof at once, for React with Base UI. A compact header says what the proof is about (Loomwork, a design system) and carries a Shine Button to every customer story. Below it, each format has a cell of its own whose hairlines run a little past its corners, with a + mark at the start corner. A large cell carries a featured quote with its stars in the text colour. Beside it a metric cell puts one number in big type with the sentence that explains it, a voice-note cell shows a play button over a short waveform and its length, and a wide video cell pairs a poster with a play button, the duration and a one-line quote. Each cell is a figure named by a corner badge ("Quote", "Metric", "Audio", "Video") and attributed to its speaker with an initials avatar. The audio and video cells are demo posters: the play buttons are links to #, so wire them to your own media. On a desktop the grid has twelve columns, on a tablet two and on a phone one. It's built from Guides, Badge, Button, Shine Button, Grid Pattern and Avatar, with CSS transitions only and your theme's tokens. For landing pages that mix written, numeric and recorded proof in one screen.
FAQ
How do I change the four tiles?
Each tile has its own typed object at the top of the file: QUOTE, METRIC, AUDIO and VIDEO, each with its speaker. Edit the text, names and figures there. The grid's cells are set by classes on each tile's wrapper (lg:col-span-5 lg:row-span-2 for the quote, lg:col-span-3, lg:col-span-4 and lg:col-span-7 for the rest), which together fill twelve columns in two rows. Keep the gap at gap-6 so the lines that run past each cell stop short of its neighbour's.
Do the audio and video tiles play anything?
No. They are posters, honest about it: the play buttons are links to # with names such as "Play Sunniva Aas's voice note, 0:48". To make them real, point the links at your media page, or swap a tile's poster for a lightweight embed or a native audio or video element with controls. The waveform is a fixed set of bars, decorative and hidden from assistive technology; it doesn't show progress.
Where does the metric come from?
It's a typed value in METRIC: a figure, a label and a note saying what was measured. The figure sits in a bdi so its sign and unit stay in order in right-to-left languages. The sample number is fictional; replace it with a figure your customer has approved, and say in the note over what period and how it was measured.
How do screen readers read the tiles?
The section's heading is an h2 and every tile is a figure with a figcaption naming the speaker. The corner badges give each tile its format in text, the stars are decorative with "Rated 5 out of 5" in words, and the metric is a description list pairing the label with its figure. The initials avatars, the waveform, the poster's pattern and the cell lines are hidden.
How does the bento fit on a phone?
Below md it's one column in reading order: the quote, the metric, the voice note, then the video, whose poster stacks over its text. The Shine Button sits under the header text. Nothing has a fixed width, the poster is 10rem tall, and the waveform's bars flex to the width left beside the play button, so it holds at 320 px.
Related
- 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.
- Pro
Mosaic Testimonials
Quote gridsA checkerboard of monogram portrait tiles and quote tiles in cells that share their hairlines, each quote beside its speaker and the second row swapped, under a compact header with a Shine Button.
- Pro
Elastic Column Testimonials
Quote gridsThree long stories from Fieldnote's customers in elastic columns inside one framed figure: the story you hover or focus widens while the others give way, and each clamped quote opens in full.
- Pro
Flip Card Testimonials
Expand, flip, pinThree testimonial cells in one hairline band that flip in 3D from a short quote to the results behind it, one open at a time, each driven by a toggle button.
- “Pro
Bento Mixed Widgets Hero
Stats and live dataA split hero with the pitch on one side and, across a solid divider, four proof widgets in hairline cells: a counting stat, avatars, a sparkline and a quote.
- Pro
Bento Grid Pricing
Plan cardsEdge hosting in a bento grid on shared hairlines: a tall Pro tile down the middle with its price and call to action up top, among four compact tiles for Hobby, Scale, a bandwidth add-on and Enterprise.