shadcn.io is not affiliated with official shadcn/ui
Simple Testimonials Block for React Aria
Three customer quotes from a bookkeeping app as plain bands ruled across the page column with + marks at the rails, the person at the start and their words at the end, and one Shine Button in the header row.
Installation
Overview
The plain baseline of testimonials, drawn with lines instead of a card. A compact header says what the product is and who is talking, with one Shine Button to the rest of the stories at its end. Below, three quotes are bands that run the full width of the page column: each is ruled across with a + mark where the rule meets the side rails, with the person (initials, name, role and company) at the start and their words at the end. The opening sentence of each quote is in the text colour and the rest is muted, so the point reads first. The block ends on its last band; the next block draws the rule under it. It's built from Avatar, Guides and Shine Button with CSS transitions only and your theme's tokens. For short landing pages, about pages and any section where restraint is the point.
FAQ
How do I change the number of quotes?
Add or remove entries in QUOTES at the top of the file. Each has a lead (the opening sentence, in the text colour) and the rest of the quote. It reads best with three or four bands; with more than five, a grid or a carousel serves visitors better.
Where do the lines come from?
Each band is a li with its own Guides set to draw only its top rule and the + marks where it meets the rails (marks="top" rules="top" sides={false}). The page column's own Guides draw the side rails and the block's top rule. The last band has no rule under it, since the next block's top rule is that edge.
Where does the button go?
The Shine Button is the block's one primary control. Point its href at your customer page; its label says where it goes. A diagonal band of light crosses it once on hover, focus and press, and rests under reduced motion.
On React Aria, the link takes the URL as its href and renders an a.
How does a screen reader read it?
The quotes are a named list, and each is a figure with a blockquote and the person in its caption. The heading is an h2. The initials avatars are hidden, since the name is written beside them.