Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Testimonials blocks

Pro

Minimal Slider Testimonials Block for Radix UI

Scrub through customer quotes for a shared-inbox app with a real range slider: five stops, one quote fading in at each, in a framed stage with + marks on its corners and the slider on a ruled foot, its position read out in words.

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

Let visitors scrub through the quotes. A header at the start introduces five notes from teams on a shared inbox. Below it, a framed stage with + marks on its four corners holds one large, centred quote with its speaker; its foot is ruled off and holds a single Slider with five stops. Drag the handle, or press the arrow keys, and the quote cross-fades to the next team's. A "1 of 5" count tracks the position beside the label. It's the quietest way to carry several quotes: no cards, no arrows, no timer and no primary button, just one control that does one thing. The slider is neutral, so primary stays free for a real call to action elsewhere. It uses Avatar, Guides, Lucide's quote mark, CSS transitions only and your theme's tokens. For landing pages that want social proof to feel considered.

FAQ

How do I change the quotes or the number of stops?

Edit the TESTIMONIALS array at the top of the file: each entry has an author, role, company, two-letter initials and the quote. The slider's range, its position label and the words read out to screen readers all follow the length of the array, so a sixth quote gets a sixth stop with no other change.

How does the slider drive the quotes?

The slider's value is a quote's index. Every quote sits in the same grid cell, so the longest one sets the stage's height and nothing moves when the slider does; the one at the slider's value is visible and the rest are invisible, and a CSS transition on opacity cross-fades between them. Dragging, clicking the track and the keyboard all update the same value.

How is the stage drawn?

A Guides with extend="sm" marks="corners" draws the frame, and a second one with marks="top" rules="top" draws the rule above the slider, with + marks where it meets the frame's sides. The slider's range and thumb are overridden to the foreground colour.

Can visitors use it with a keyboard?

Yes. The handle is the one tab stop. The left and right arrow keys move one quote at a time, and so do up and down, and Home and End jump to the first and the last. The quotes that aren't showing are hidden from assistive technology, so only the visible one is read.

What does a screen reader announce?

The slider is named "Quote" and its value is read in words rather than as a bare number: "Quote 3 of 5, Lucia Ferrante, Design Lead". When a drag or a key press ends, a polite live region says the same thing, so the visitor hears the speaker they landed on instead of every speaker they passed; nothing is announced on load.

What changes when a visitor prefers reduced motion?

The header and stage appear without fading in, and the quotes swap at once instead of cross-fading. The slider still works the same way, and nothing moves on its own.

Does it work in right-to-left languages?

Yes. The slider runs from the end side to the start side in a right-to-left page, the frame and its marks are symmetric, and each quote sits in a bdi so its quotation marks stay with the sentence.

All 100 testimonials blocks