shadcn.io is not affiliated with official shadcn/ui
Interview Testimonials Block for Svelte
A customer interview as a Q&A transcript in a split: a rail with the headline, the interviewee and a Shine Button beside five ruled exchanges, each with its answer set as a quote and a chip with the time it was said.
Installation
Overview
A testimonials section that reads like a transcript, for Svelte with Ark UI. A rail at the start holds the heading, a sentence, the person being interviewed and a Shine Button, and stays in view while the transcript scrolls on a desktop. A divider with a + where it meets the top rule sets it apart from five exchanges, ruled apart by hairlines: each is a question, the answer set large as a quote, and a monospace chip with the minute it was said. On a phone the rail comes first and only the first three exchanges show, behind an "All 5 questions" button. It lets one customer tell a longer story than a pull quote allows, in the order a reader would have asked for it. It's built from Avatar, Badge, Button and Shine Button, with CSS transitions only and your theme's tokens. For case-study pages, customer pages and the end of a pricing page where one detailed voice is worth more than six short ones.
FAQ
How do I change the interviewee and the questions?
Edit INTERVIEWEE and the EXCHANGES array at the top of the file. Each exchange has a question, an answer and a time written as you want it shown, such as "12:30". Keep the times in order and inside the length the intro promises; they are typed text, not measured from a recording. Keep answers to one or two sentences: the transcript is meant to be read in a glance, and the link takes people to the full story.
Do the time chips link to a recording?
No, they are plain labels. To link to a recording, wrap each chip's time in a link that carries the start time, and keep the sr-only "At" before it so the label still reads as a time. Don't add links to a recording you can't host.
How do screen readers read it?
The questions are h3 headings under the section's h2, so a screen reader can jump from question to question. Each answer is a figure with a blockquote, and a hidden caption names the speaker. The exchanges form an ordered list named "The interview", and each time chip is read as "At 12:30".
What does the phone show, and how do I change it?
Below md the first three exchanges show and the other two wait behind the "All 5 questions" button, which reports whether the list is open with aria-expanded and points at the list with aria-controls. From md all five show and the button disappears. Change PREVIEW at the top of the file to show more or fewer first.
Where does the button go?
It's a link (href="#"): point it at the full case study. It's the block's one primary control; the "All 5 questions" button is an outline button that only shows on a phone.
The button's asChild receives its props: spread them onto your router's link.
Does it work in right-to-left languages, and what about reduced motion?
Yes. The rail moves to the right and the divider to its other side, the cards use logical sides, the chip keeps its digits in order inside a bdi, and each answer sits in a bdi so its quotation marks stay at the ends of the sentence. The section fades up once on load and nothing else moves; with reduced motion the fade is skipped as well, and the Shine Button's sweep becomes a fade.