shadcn.io is not affiliated with official shadcn/ui
Accordion Testimonials Block for React
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 React with Base 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.
Related
- Pro
Expandable Profile Testimonials
Expand, flip, pinThree customer cells that expand in place into a profile, each a hairline box with a + mark, under a compact header with a Shine Button: a two-line quote when closed, the whole quote plus industry, team size, plan and time as a customer when open.
- Pro
Truncated Testimonials
Quote gridsFour customer quotes in a two-column grid, each cut to three lines with a Read more button that lifts the cut and turns into Show less.
- Pro
Detailed Reviews Testimonials
Ratings and reviewsThree long reviews of a bookkeeping app beside a rail of proof: the average rating and its spread, with Helpful and Not helpful votes whose counts change as you choose.
- Pro
FAQ Accordion Hero
Interactive demosA compact hero on ruled bands between solid rails: a headline and a Shine Button, then a band with four common questions in an accordion that opens one at a time, beside a short note.
- Pro
Accordion Plans Pricing
Plan rowsThree plan rows for an email API, each its own band with its price and call to action in view, opening in place to list its features, with a monthly and annual switch in the header row.
- Pro
Compact List Testimonials
Rows and listsTwelve 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.