shadcn.io is not affiliated with official shadcn/ui
Split Quote Panel Hero Block for React Aria
A 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.
Installation
Overview
A reverse split-layout hero that leads with a customer's words, for React with React Aria, shown for Dockside, a deployment platform. A tinted panel on the start side runs flush to the page column's start rail and its foot, and is cut into three bands by solid rules with + marks on the rails: the quote at display size with an oversized quotation mark, its author with an avatar, name and role, and two results in a pair of cells (9 min median deploy, down from 40, and 78% fewer pager alerts a week). A divider separates it from the copy at the end: an announcement pill, the headline, one sentence, a ShineButton link, an outline Button link and a one-line note. The copy comes first in the page's source and the panel moves to the start from lg. It's built from Announcement, Status, Shine Button, Button, Avatar and Guides with Tailwind CSS, and the parts settle in with CSS transitions that stay still under reduced motion. For SaaS products with a strong customer endorsement, enterprise landing pages, and any page where one testimonial should earn trust before the pitch.
FAQ
How do I change the quote and who said it?
Edit QUOTE at the top of the file: the text, the author, their role and company, and the initials shown in their avatar. Short quotes work best at this size: under 30 words keeps it to four or five lines. RESULTS holds the two figures in the bottom band, each a value and a label. Only quote customers who have agreed to it, and keep the figures true to what they said.
Can I show the author's photo instead of initials?
Yes. Put an AvatarImage with the photo's src and the author's name as alt before the AvatarFallback in the caption's Avatar. The image shows once it loads, and the initials stay as the fallback while it loads or if it fails. The Avatar docs show the parts.
Why does the quote come after the headline on a phone?
The copy is first in the page's source, so the h1 is the first thing a screen reader, a search engine and a phone reach. From the lg breakpoint up, lg:col-start-1 lg:row-start-1 puts the quote panel on the start side, as in the design, without changing that order. Swap the two columns in the markup and drop those classes if you want the quote first everywhere.
How does a screen reader read the quote?
The quote and its author are one figure: the words are in a blockquote and the author is its figcaption, so the attribution stays tied to the quote. The big quotation mark is decoration and hidden. The two results follow as a description list, each figure with its label, and the figures' values and signs stay in order in a right-to-left page.
How do the bands line up with the page's lines?
Each band draws its rule with the Guides component rather than a border, so the + marks land exactly where the rule meets the page column's rails. The panel ends in the results band and has no bottom padding: the block's last line is the next section's top rule. The divider is the copy column's start border, with + marks where it meets the top rule.
How does the hero fit on a phone?
The two columns stack below the lg breakpoint, copy first, then the quote panel under a ruled line. The headline steps down from text-5xl to text-4xl and the quote from text-3xl to text-2xl, and the two calls to action wrap onto two lines when they don't fit side by side, so nothing scrolls sideways down to 320 px.