shadcn.io is not affiliated with official shadcn/ui
Large Quote Testimonial Block for Ark UI
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.