shadcn.io is not affiliated with official shadcn/ui
Testimonial FAQ Block for Radix UI
An FAQ for a podcast studio where each of five questions brings its own customer quote, shown in a framed panel beside the open question.
Installation
Overview
A testimonial FAQ for React with Radix UI. A compact header sits over a band of five questions in an accordion; at the end, behind a split divider, a framed panel holds a customer quote that changes with the open question, each quote a figure with a blockquote and a caption (an initials avatar, the name, the role). The five quotes are stacked in one grid cell, so the panel keeps the height of the longest and nothing moves when the quote changes. On a phone the panel sits under the questions. It's built from Accordion, Avatar and Guides, with CSS transitions for the entrance and the quote's fade and your theme's tokens for every colour. For service and agency pages where a client's words answer an objection better than a claim.
FAQ
How do I change the questions and their quotes?
Edit QUESTIONS at the top of the file: each entry carries the question, its answer, and the quote that goes with it (quote, name, initials, role). Keep a quote to one or two sentences and make it about the question it sits beside, not a general compliment. Add or remove entries freely: the panel is built from the same list.
How does the quote follow the question?
The Accordion is controlled: opening a question sets it as the current one, and the panel shows that question's quote. Closing the open question keeps its quote on show, so the panel is never empty. One question is open at a time, and the first is open on load.
Are the closed answers in the page's markup?
No. This Accordion renders an answer only when its question opens. If search engines must read every answer, render them as a list that always shows them, or add structured data built from the same array.
Are the quotes in the page when they aren't showing?
Yes. All five are rendered, stacked in one grid cell, and the ones not showing are invisible with no opacity, which also hides them from assistive technology, so a screen reader reads only the current quote. Each is a figure with a blockquote and a figcaption. The avatars carry initials and are hidden from screen readers, since the name is in the caption.
How does it work with a keyboard and a screen reader?
Each question is a button inside its own h3 under the section's h2, so a screen reader's headings list shows them all. Tab moves from question to question, Enter or Space opens and closes one, and the button says whether it's expanded. The open answer is labelled by its question.
The Up and Down arrows also move between questions, and Home and End jump to the first and last.
How does it fit on a phone?
Below the lg breakpoint the header, the questions and then the quote panel stack in one column, with a rule between the questions and the panel. The panel isn't sticky there. Opening a question changes the quote under the list, so it can be below the fold on a short screen; keep the list to five or fewer.