shadcn.io is not affiliated with official shadcn/ui
Large Quote Testimonial Block for React
An oversized quote whose type scales with its own container, in a band with the attribution running vertically in a rail at the end edge.
Installation
Overview
One big sentence, start-aligned, with the attribution turned on its side. A compact header sits above a band between the page's rails. The quote is set in heavy type that grows and shrinks with the width of its own container, from a comfortable size on a phone to a poster size on a wide screen. At the end edge, behind a divider whose + mark meets the band's top rule, the author's initials avatar sits above their name and role written vertically, reading upward like the spine of a book. On a narrow screen the attribution drops beneath the quote, between two hairlines, and reads horizontally. A Shine Button below the band is the block's one primary control. It's built from Avatar, Guides and Shine Button with CSS only and your theme's tokens. For landing pages, annual reports and case study openers where one line is the whole message.
FAQ
How do I change the quote and the attribution?
Edit QUOTE and AUTHOR at the top of the file. Two or three sentences fill the width well; the type size adjusts, so a shorter quote gets larger lines.
How does the type scale?
The quote's container is a CSS container, and the text size is a clamp of a fraction of that container's width, between 1.75rem and 3.25rem. It follows the space the block really has, so placing it in a narrower column shrinks the quote with it, without any breakpoints.
How does the vertical attribution work?
From the small breakpoint the name and role use writing-mode: vertical-rl, turned half a turn so they read from bottom to top, and sit in the end column beside a hairline. Below it the attribution is horizontal under the quote. Placement uses logical properties, so in right-to-left languages the column and hairline move to the left side. Browsers without vertical writing modes show the text horizontally in the same column.
How do screen readers read it?
The header's heading is the section's h2. The quote is a figure with a blockquote and a figcaption with the name and role as real text, read in logical order whichever way it's drawn. The avatar is hidden because the name is written beside it.
Related
- 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
Featured Hero Testimonial
One big quoteA 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.
- 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.
- Pro
Spotlight Testimonial Card
One big quoteOne customer quote for a field-service app on a figure framed by hairlines with + marks on its corners, lit by a pointer-following spotlight: a soft glow and a grid that shows only where the light falls, which also follows keyboard focus on any control you place inside it. A Shine Button in the header row links to the full story.
- 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.