shadcn.io is not affiliated with official shadcn/ui
Snippet Testimonials Block for Radix UI
Customer quotes for a component kit, set out like search results: a result count on a ruled band, then six results in two columns sharing their hairlines, each with a breadcrumb, a linked outcome headline and an excerpt with the matching terms in bold.
Installation
Overview
A testimonials section that borrows the most familiar layout on the web: the search result. A compact header names the product and carries one Shine Button to all the stories. Under it, a ruled band reads "6 customer stories, newest first", and then six results fill a two-column grid whose cells share their hairlines. Each result has a small mono breadcrumb on top (the person's name, their role and company, how long ago), a headline in the customer's own outcome that links to the full story, and a short excerpt where the words that carry the argument are picked out in bold. On a phone the first three show, with an "All 6 stories" button to reveal the rest. It's built from Avatar, Button, Guides and Shine Button, with Lucide icons, CSS transitions only and your theme's tokens. For landing pages that want proof to scan quickly and case-study indexes.
FAQ
How do I change the results and the bold terms?
Edit RESULTS at the top of the file. Each excerpt is a list of pieces, and a piece with hit: true is drawn in bold, so you decide exactly which words stand out. Keep each excerpt to about two lines, and bold two or three phrases at most: more than that and nothing stands out.
Is it a working search?
No. It borrows the look of a results page and has no input, no filtering and no ranking: the stories are shown in the order they are written in. If you want a field that really filters quotes, take the Search testimonials block and keep this layout for the results.
What happens on a phone?
The grid becomes one column and shows the first three results. An "All 6 stories" button (it reports aria-expanded and controls the list) reveals the other three; on tablets and desktops all six always show.
What does each headline link to?
Every headline is a link, and it is the only link in its result, so a keyboard user tabs from story to story without stops in between. Point each href at the full case study. The links are underlined on hover and focus and keep a visible focus ring. The text of each one is different, so a list of links reads clearly out of context. The Shine Button in the header goes to the whole index.
The link renders its a through asChild, so the button styles land on the link.
How does a screen reader read a result?
The results are a named ordered list, and each is a figure with a blockquote for the excerpt. The breadcrumb is the figure's caption, read as the name, then the role and company, then the time, with the chevrons hidden. The bold terms are strong, so a reader may stress them. The section's heading is an h2 and each headline is an h3.