shadcn.io is not affiliated with official shadcn/ui
Featured Hero Testimonial Block for React
A giant centred quote set as typography in a ruled band, with small avatar and icon chips sitting between its words like inline pictures, and a footer band that splits into the author and a Shine Button to the full story.
Installation
Overview
A quote as a headline, for React with Base UI. A compact header names the section, and under it a ruled band holds the sentence at hero scale, centred, with + marks where the band meets the page rails. Between a few of its words sit small rounded chips that read like pictures in the line: a pair of overlapping avatars after "one place", a bolt in a dark pill after "minutes", a sparkle in a muted pill before the last word. The chips scale with the type, so they line up from a phone to a wide screen. A second band under the sentence splits at a hairline into the author's avatar, name and role on one side and a single Shine Button, the story of Kestrel Row's move to Stowaway, on the other; on a phone the two stack. It's built from Avatar, Guides and Shine Button, with Lucide icons, CSS transitions only and your theme's tokens. For the top of a customer page, a board deck or any landing page where one sentence should do the talking.
FAQ
How do I change the quote and where the chips go?
The sentence is written in the block's markup so you can place the chips: each chip is a small span between two pieces of text. Change the words, move a chip or delete one; AUTHOR at the top holds the name, role and initials under the quote.
How do the chips stay in line with the text?
Each chip is an inline box with a height of 0.9em, centred on the line, so it grows and shrinks with the font size. The icons and avatars inside are sized in em too. Chips never break across lines, and the quote wraps around them. The bolt chip is filled with the text colour, not the primary, so the button stays the only primary control.
How do screen readers read it?
As the sentence alone. The chips are decorative and hidden from assistive technology, so the quote reads whole, and its text can be searched, selected and copied without them. The heading is the section's h2; the quote is a figure with a blockquote and a figcaption.
Does it work in right-to-left languages?
Yes. The quote sits in a bdi so its quotation marks stay at the ends, the chips take the reading order, the overlap of the avatars flips with it, and the footer band's cells swap sides.
Related
- Pro
Large Quote Testimonial
One big quoteAn oversized quote whose type scales with its own container, in a band with the attribution running vertically in a rail at the end edge.
- Pro
Pull Quote Testimonial
One big quoteA pull quote from a retailer's checkout case study between two double rules, in serif type with its opening quotation mark hanging into the margin and a small-caps attribution.
- Pro
Highlight Quote Testimonial
One big quoteA 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.
- Pro
Single Focus Testimonial Quote
One big quoteOne long customer quote for a release-automation tool, cut into sentences: hover, tap or focus a sentence and the others recede. A split with a header rail, a solid divider and the quote set large, with a Shine Button at its foot.
- “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
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.