shadcn.io is not affiliated with official shadcn/ui
Accordion Testimonials Block for Svelte
Customer stories as accordion rows beside a side header, on the page's drafting lines: each row shows the person, a one-line summary and a rating, and opens one at a time to read the full quote.
Installation
Overview
A testimonials section for pages where vertical space is tight, for Svelte with Ark UI. A side header on the start side says what the section is (here, five teams on Quillfold, a documentation platform) and holds the one Shine Button, with a ghost link beside it. The stories sit on the other side as five rows, each a band between the page's solid hairlines, split from the header by a divider that meets the top rule with a plus mark. A row shows an initials avatar, a one-line summary of what changed, a five-star rating in the text colour and who said it. Open a row to read the whole quote; opening another closes the first, and the first row starts open so the section never looks empty. On a phone the header comes first, then the rows, then the buttons, so the first quote is on the first screen. It's built from Accordion, Avatar, Shine Button, Button and Guides, with CSS transitions only and your theme's tokens; the Shine Button is the only element in your primary colour. For landing pages that want social proof without a wall of text, and for the stretch of a page that follows a FAQ.
FAQ
How do I change the stories and ratings?
Edit the STORIES array at the top of the file. Each story has a name, role, company, initials, a one-line summary for the closed row, the full quote and a rating from 1 to 5. The rating only draws the stars, in the text colour and the border colour; nothing averages it, so it never has to add up to a figure elsewhere on the page.
Does it open one story at a time?
Yes. The accordion is single-open, so opening a row closes the one that was open, and pressing the open row again closes it. The first row is open on first paint. To allow several at once, use the accordion's multiple mode.
How are the lines drawn?
The section sits on the page column's drafting lines: Guides bleed marks="top" rules="top" draws the two rails and the top rule, the same in every block. The grid takes back the column's vertical padding, so the divider (the list's border-s) runs from the top rule down to the next block's rule, with a plus on the crossing. Each row after the first draws its own top rule with Guides marks="top" rules="top" sides={false}, so a plus lands on the divider and on the rail. All of it is decorative, hidden from screen readers and in your theme's border colour.
How does it work with a keyboard and a screen reader?
Each row is a heading holding one button, so screen readers list the stories as a heading outline and announce whether a row is open. Tab moves between rows, and Space or Enter opens one. The stars are decorative; the row says "Rated 5 out of 5" in text instead, and the opened quote is a figure with a blockquote named after its author.
How does it fit a phone?
Below lg the header, the rows and the buttons stack in that order, and the divider disappears: each row becomes a band from rail to rail with a plus on each end. Only one row is open, so the section stays short, and the Shine Button closes it instead of pushing the stories down.