shadcn.io is not affiliated with official shadcn/ui
Compact List Testimonials Block for Solid
Twelve one-line customer quotes for a field-reporting app in a fixed-height scroll area inside one hairline band, each row a disclosure that opens in place to the full quote, with a ruled count footer and a Shine Button.
Installation
Overview
A testimonials section for Solid with Ark UI for when you have a lot of voices and little room. A compact header names the product (a field-reporting app for construction crews) and carries the block's one primary button, a Shine Button to the full archive. Below it, one band between two hairlines, with + marks on its corners, holds twelve customers who each get a single row: initials, the first sentence of their quote cut to one line, and their name and role at the end. The rows sit in a fixed-height scroll area, so the section never grows with the list, and the first row starts open so a quote is on show. Open any row and it expands in place to the full quote, without moving the rows above it. A ruled footer line says how many quotes you're looking at. It's built from Scroll Area, Collapsible, Avatar, Guides and Shine Button, with CSS transitions only and your theme's tokens. For pricing pages, docs landing pages and anywhere proof should be scannable, not read.
FAQ
How do I add or edit quotes?
Edit the ENTRIES array at the top of the file. Each entry has a lead, which is the first sentence and the only part a closed row shows, and a rest, which follows it. The first row opens by itself; change defaultOpen={index === 0} to start them all closed. The open row shows lead and rest together, so the two can never disagree. Keep lead short and complete in itself, because on a phone it's cut to one line.
Where does the 48 in the footer come from?
It's a typed constant, TOTAL_QUOTES, standing for the size of your whole archive. The list is a window onto it, so "Showing 12 of 48 quotes" in the footer and the label of the Shine Button are made from the number of entries and that constant. Set it to the real count of quotes you can link to, or remove the footer line if you can't.
How do I use it with a keyboard?
Tab moves from row to row. Enter or Space opens or closes the focused row, and the chevron turns to show its state. The scroll area follows focus, so tabbing to a row below the fold scrolls it into view. Focus stays on the row when you open it.
How do screen readers read it?
The heading is the section's h2, and the hairlines and + marks are decoration and hidden. The rows are a list inside a region named "Customer quotes, one line each". Each row is a button that says whether it's expanded and reads the first sentence, then the name and role, even on a phone where the name is hidden visually. The open panel holds the full quote in a blockquote.
What happens with reduced motion?
The rows open and close at once instead of animating their height, and the chevron turns without a transition. The header and the band fade up once on load, and not at all with reduced motion. The Shine Button's light fades in where it stands instead of sweeping.
How does it fit a phone?
Below the sm breakpoint the name and role are dropped from the closed row, so the first sentence gets the room, and the open panel shows them under the quote instead. The scroll area stays 20rem tall at every width, and nothing scrolls sideways at 320px.