shadcn.io is not affiliated with official shadcn/ui
Simple Testimonials Block for React
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 Base UI, the link renders through render={<a href="…" />} with nativeButton={false}.
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.
Related
- Pro
Text-Only Testimonial
One big quoteA customer letter set as plain prose with no card and no avatar, beside a header with one Shine Button and a hairline divider: a salutation, two paragraphs and a closing, signed by a name that writes itself in.
- 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.
- Pro
Two Column Testimonials
Rows and listsA testimonials section split by a solid divider: a pinned intro column with the heading and a Shine Button beside five customer quotes set as ruled rows, the first one larger.
- Pro
Blockquote Testimonial
One big quoteA statement quote in serif type between hairlines, with its author and cited source beneath, a Copy quote button that copies the quote together with its attribution, and one Shine Button.
- Pro
Headline Testimonials
Quote gridsA side header and a hairline grid of Sundial customers' quotes: the page column splits at `lg`, each quote leads with its takeaway as a large headline, and on a phone the six cells become one snap row.
- Pro
Accordion Testimonials
Rows and listsCustomer 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.