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