shadcn.io is not affiliated with official shadcn/ui
Stacked Testimonial Banner Block for Ark UI
A single customer quote for a block library: a quote mark, the quote in medium weight, an initials avatar with name and role, and a tinted band with the result in numbers and a case-study link.
Installation
Overview
A customer quote for React with Ark UI, one voice and one result, small enough to sit between two sections. A framed card with + marks on its corners holds a figure: a quote mark in a round tile, the quote in medium weight, centred, and a caption with an initials avatar, the name and the role. Under a solid rule, a tinted band says what the customer got, "14 blocks, one weekend", and links to the case study with an arrow that turns around in right-to-left layouts. There's no button: the quote is the message. The markup is a figure with a blockquote and a figcaption, so assistive technology reads the attribution with the quote. It's built from Guides and Avatar with Lucide icons and your theme's tokens for every colour. For landing pages, pricing pages and docs that need one credible line from a customer.
FAQ
How long can the quote be?
Two sentences at most, and about 90 characters reads best: the card centres the text in a column about 32 rem wide, so a longer quote wraps to four lines on a phone and starts to look like a testimonials section. If you have more to say, link it from the band, or use a testimonials block. Edit QUOTE at the top of the file.
Why a figure, a blockquote and a figcaption?
Together they tell assistive technology what the text is and who said it. The caption is the figure's last child, as the specification asks, and the decoration around them (the quote tile) is hidden from screen readers. The result band is outside the figure, because it describes the customer's outcome, not the words of the quote.
Can I use a photo instead of initials?
Yes: add an AvatarImage with the person's name as its alt before the fallback, and keep AvatarFallback, which shows the initials while the image loads or if it fails. The fallback is foreground text on a muted tile so it keeps its contrast in every theme.
How should I write the result?
As a number and a span of time the customer would recognise, true on the day you publish it and not dated ("14 blocks, one weekend", not "in April"). The number sits in bdi with the rest of the phrase, so right-to-left layouts keep it in order. Drop the band and the card ends at the caption if you have no result to show.