shadcn.io is not affiliated with official shadcn/ui
Testimonial Quote CTA Block for React
A split call to action led by one customer quote, with a marker stroke drawn across its key phrase and the author beneath in the wide cell, and the headline and a Shine Button to the full story in the narrow one.
Installation
Overview
A closing section that lets a customer make the pitch, for React with Base UI. Between the page rails a wide start cell holds one large quote, with the author beneath it; the sentence that carries the argument is picked out with a highlighter stroke that draws across it once the page loads. A solid divider separates it from a narrow end cell with the headline for Tallyboard, a made-up planning board, one sentence and a single Shine Button to the full story. On a phone the headline comes first, then the quote, then the button. It's built from Highlight Text, Avatar, Guides and Shine Button, with CSS transitions only and your theme's tokens. For sign-up pages, pricing pages and the foot of any landing page where one strong sentence from a real customer does more than another feature list.
FAQ
How do I change the quote and the highlighted phrase?
Edit QUOTE and AUTHOR at the top of the file. The quote is three strings: before, the key phrase that gets the marker, and after. Keep the key phrase to one sentence or less, since a long mark across several lines looks heavy. Use the customer's exact words and ask them first.
How does the marker work?
HighlightText paints a background behind the text and grows it from nothing to the full width with a CSS animation, starting where the text starts, so it runs right to left in Arabic or Hebrew. Here its colour is a light tone of your text colour, so the primary colour stays on the button. It stays real text, and with reduced motion the mark is simply there.
How do screen readers read it?
The quote is a figure with a blockquote and a figcaption for the author. The headline is the section's h2. The decorative quote mark and the initials avatar are hidden, since the author's name is written beside the avatar.
How does the split work?
From lg a three-by-two grid puts the quote in the wide start cell across both rows, and the headline and the button in the narrow end cell, one above the other, with the button at the foot. The divider is those two cells' own start border, with marks where it meets the top rule. Below lg everything stacks in reading order.
Related
- Pro
Split Light Speech Bubble CTA
Social proofA split call to action built as a short chat: the headline at the start, and at the end a customer's quote in a bubble, answered by a reply bubble that holds the Shine Button to start free.
- Pro
Light Chat Message Bubble CTA
Product previewsA reverse split CTA for a support assistant between solid rails: an ask-me chat window in a hairline frame at the start (pick a question, watch the assistant type, read its answer) and the headline, a sentence and the Shine Button at the end.
- Pro
Inset Star Rating Big CTA
Social proofA card-in-card call to action built on a rating summary: a headline and a Shine Button over a band with a big score and foreground stars beside a five-to-one star histogram, all figures worked out from the counts.
- “Pro
Featured Testimonial Hero
TestimonialsA compact start-aligned hero with a headline, a Shine Button and an outline action over a closing band that holds one customer's quote, large, beside their rating, name, role and the number it is about.
- “Pro
Split Quote Panel Hero
TestimonialsA reverse split hero that opens with a customer quote: a tinted panel on the start side in three ruled bands (quote, author, two results), and the headline and a Shine Button at the end.
- Pro
Centered CTA with Avatar Social Proof
Social proofA centred statement for a community, closed by a band of six members on shared hairlines: each cell a link that opens a hover card with the member's role, status and join date, under one Shine Button.