shadcn.io is not affiliated with official shadcn/ui
Testimonials With CTA Block for Vue
Two customer quotes led by the result each one measured, in a hairline band with a divider, then a card in card whose headline repeats the larger result and whose Shine Button is the one primary action.
Installation
Overview
Let two customers make the pitch, then ask. Two quotes share one hairline band, split by a divider that meets the top rule with a + mark, each opening with the number its team measured, 62% faster builds and 41% fewer failed deploys for Hullmark, a fictional build cache, and then the person's own words and who they are. Below them a card in card holds the ask: a raised panel inside a tinted shell with + marks on its corners, its headline repeating the larger of the two results, one Shine Button saying "Start free trial" and a quiet outline button for "See how it works". The headline is written from the same data as the quotes, so it can't drift. On a phone the two quotes stack, split by a rule, and the whole block ends within two screens. It's built from Avatar, Button, Shine Button and the Guides lines, with CSS transitions only and your theme's tokens. For the end of a landing page or a customers page, where the proof leads straight into the next step.
FAQ
How do I change the quotes and results?
Edit the STORIES array at the top of the file. Each story has the quote, the speaker's name, initials, role and company, and a result made of a percent and a label that completes the sentence ("faster builds", "fewer failed deploys"). Keep the result something the customer measured and agreed to share, and use their exact words for the quote.
How does the headline pick its result?
It takes the story with the largest percent, so the call to action always repeats the strongest number the page has actually shown. Add a third story and the headline still follows the data; nothing in the panel is typed by hand.
How do I connect the buttons?
Both are real links: point their href at your sign-up, trial or product page. The label of the main one says what the visitor gets rather than "Learn more". The Shine Button is the block's only primary control; the second is an outline button.
Each button takes asChild with the link inside, so it can be your router's link.
How do screen readers read it?
The section's h2 introduces two quotes in a list, each a figure with a blockquote and a figcaption; the result is the first line of its cell, written as "62% faster builds". The panel's headline is an h3 followed by two links. The avatars are decorative because each name is written beside them, and the + marks and lines are hidden.