shadcn.io is not affiliated with official shadcn/ui
Quote Carousel Testimonials with Next-Speaker Preview Block for React
A centred, looping carousel of large customer quotes in a card in a card, whose Previous and Next buttons preview who speaks next, with the neighbour's avatar and first name.
Installation
Overview
Make the way out of a quote a reason to keep going. Under a short centred header, a tinted shell with + marks on its corners holds a raised panel, and one customer quote fills the panel in large type, with its speaker beneath it. Along the panel's foot, two wide buttons preview the neighbours: Previous shows the avatar and first name of the speaker you'd go back to, and Next shows who is waiting after this one, so "Next: Rohan" tells the visitor what a click buys them. The carousel loops, swipes on touch screens and has no autoplay. A Shine Button below the panel, the block's one primary control, leads to all the stories. It's built from the Carousel, Avatar, Button and Shine Button, with Lucide icons, CSS transitions only and your theme's tokens. For landing pages with a handful of strong quotes that deserve their own space.
FAQ
How do I change the quotes?
Edit the TESTIMONIALS array at the top of the file: each entry has an author, role, company, two-letter initials and the quote. The neighbours shown on the buttons are worked out from the current slide and the length of the array (the first quote's "previous" is the last), so adding a quote needs no other change. Quotes of two or three sentences fit the large type best.
How does the carousel work on each library?
loop: true, so it's an endless loop: the block reads the current slide from Embla's select event and moves with scrollPrev and scrollNext. The direction comes from Base UI's own provider, so the slides move the right way on a right-to-left page.How do visitors use it with a keyboard and a screen reader?
Tab to Previous and Next and press them; the left and right arrow keys move between quotes too. Only the current slide is exposed: the others are inert and hidden from assistive technology, and each slide is a group named by its author and position, such as "Beatriz Oliveira, quote 3 of 5". After a visitor moves the carousel, a polite live region says which quote is now showing; nothing is announced on load. The buttons are named for what they preview, such as "Next quote: Beatriz".
What changes when a visitor prefers reduced motion?
The header and the panel appear without fading in. The carousel never advances by itself, so there's no autoplay to pause; slides still change when a button is pressed.
Does it work in right-to-left languages?
Yes. The slides follow the page's direction, Previous and Next swap sides and their chevrons mirror, and each quote sits in a bdi so its quotation marks stay with the sentence.
Why doesn't it autoplay?
Because a quote that changes while someone is reading it is one they can't finish, and anything that moves by itself needs a pause control. Here the visitor decides when to move on, and the Next button gives them a reason to. If you want a timed rotator, the Rotating Hero Testimonials block has one with a pause button.
Related
- Pro
Minimal Slider Testimonials
Carousels and decksScrub 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.
- Pro
Rotating 3D Wheel Testimonials
Carousels and decksA 3D wheel of customer quotes in a framed figure under a centred header: the active quote faces you flat while its neighbours tilt away above and below, and up and down buttons in a footer strip turn the drum.
- Pro
Layered Quote Deck Testimonials
Carousels and decksA deck of four customer quote cards in a framed figure under a centred header: the front card sits on two peeking cards, and the Shine Button sends it to the back so the deck cycles.
- Pro
Triple Stack Vertical Carousel Testimonials
Carousels and decksA vertical carousel with three customer quotes in view: each press of the up or down button moves one row, with a count of which quotes are showing.
- “Pro
Featured Testimonial Hero
TestimonialsA compact start-aligned hero with a headline, a Shine Button and an outline action over a closing band that holds one customer's quote, large, beside their rating, name, role and the number it is about.
- “Pro
Testimonials Rotating Hero
TestimonialsA reverse split hero with a card that shows one customer quote at a time in a hairline frame, a pause button and a dot per quote, beside an announcement pill, a headline, a Shine Button and an outline action.