Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Testimonials blocks

Pro

Highlight Quote Testimonial Block for Radix UI

A full customer review of Copperline, a code-review tool, beside its best sentence pulled out large with the author: the same sentence carries a marker stroke in the review. One hairline band, split in two, with a Shine Button link in the header.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

A testimonial that does the editing for the reader. A compact header holds one Shine Button that links to the full story. Under it, one hairline band is split by a divider: the whole review sits on the start side, written out in full so it stays believable, and one sentence in it is picked out with a marker stroke that draws across it when the page loads. The same sentence stands on the end side, on a quiet tint, at display size with the author's name, and the divider meets the band's rules in + marks. The visitor can skim the big line or read the whole story. It's built from Highlight Text, Avatar, Guides and Lucide's quote mark, with CSS transitions only and your theme's tokens; the marker is a tint of the text colour, so the button is the only primary colour. For landing pages and case-study teasers where a long, honest review has one line that does the selling.

FAQ

How do I change the review and the highlighted sentence?

Edit REVIEW and AUTHOR at the top of the file. The review is three strings: before, the key sentence that is both marked and pulled out, and after. Because the pull-out reuses key, the two can never drift apart. Keep key to one sentence, and use the customer's exact words.

How does the marker work?

HighlightText paints a background behind the text and grows it across the sentence with a CSS animation, starting where the text starts, so it runs from the right in Arabic or Hebrew. Each wrapped line gets its own mark. With reduced motion, or without JavaScript, the mark is simply there. The marked words stay real text. The colour is the MARKER constant, a 12% tint of the text colour; pass your own colour to highlightColor for another.

How do screen readers read it?

The review is a blockquote inside a figure, and the author is its figcaption. The pulled-out line is announced as "Highlight of the review" followed by the sentence, so a listener hears the same line twice by design, as in a magazine pull quote. The quote mark and the initials avatar are hidden.

How does the layout change on small screens?

Below the large breakpoint the review comes first and the pull-out sits under it on its tint, with a rule between them; from the large breakpoint up they sit side by side with the author under the pull-out and a divider between them. The reading order is the same at every width, and the review starts on the first screen of a phone.

Does it work in right-to-left languages?

Yes. The review and the pull-out sit in a bdi so their quotation marks stay at the ends, the divider moves to the reading start edge of the pull-out and the caption follows the reading direction.

How is this different from a single quote with a marker?

A single centred quote shows one sentence and nothing else. Here the visitor also sees the whole review it was taken from, which makes the highlighted line easier to trust, and the line is repeated at display size rather than only marked.

All 100 testimonials blocks