shadcn.io is not affiliated with official shadcn/ui
Testimonial Quote CTA Block for React Aria
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 React Aria. 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.