Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Testimonials blocks

Pro

Single Focus Testimonial Quote Block for Ark UI

One 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.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

A single customer voice, read one sentence at a time. The block is a split: a rail at the start holds the headline, a line on who is speaking and a how-to pinned to its foot, and a solid divider (with + marks where it meets the top rule) sets it apart from the quote on the other side. The quote is set large; point at a sentence, tap it, or tab in and use the arrow keys, and that sentence stays at full strength while the rest settle back to your theme's muted text colour. At rest every sentence is at full contrast. The speaker and one Shine Button to the full story sit under the quote. On a phone the parts stack under a rule. It's built from Avatar, Guides and Shine Button with CSS transitions only and your theme's tokens. For landing pages and case-study openers where one long testimonial is the proof.

FAQ

How do I change the quote?

Edit SENTENCES and AUTHOR at the top of the file. Each entry in SENTENCES is one sentence and keeps its trailing space, so the quote reads as one paragraph. Three sentences is the sweet spot; more than five makes the focus effect feel fussy. Use the customer's exact words and ask them first.

How is the split drawn?

The page column is a two-column grid from lg: a 20rem rail and the quote. The quote's column carries the divider as a start border, and a Guides with marks="start" puts the + mark where it meets the top rule. Each column has its own vertical padding, so the divider runs the full height. Below lg the columns stack, with a rule and + marks between them.

How does the keyboard work?

Tab moves into the quote and stops once, on one sentence. The arrow keys move between sentences (Down and the reading-direction arrow go forward, Up and the other arrow go back), Home and End jump to the first and last, and Escape leaves the quote. The Shine Button is the next tab stop.

What happens on a touch screen?

There is no hover, so tapping a sentence focuses it and the others recede. Tap elsewhere to bring them all back to full strength.

How do screen readers read it?

The quote is a figure with a blockquote and a figcaption for the speaker, and the sentences are plain inline text inside one paragraph, so it reads as a single quote. The dimming is only a colour change, and the dimmed sentences keep AA contrast.

Does it work in right-to-left languages?

Yes. The quote sits in a bdi, so its quotation marks stay at the ends of the sentence, the rail sits at the right with the divider on its mirrored edge, and the arrow keys swap so that forward always follows the reading direction.

All 100 testimonials blocks