shadcn.io is not affiliated with official shadcn/ui
Quote Carousel Testimonials with Next-Speaker Preview Block for Svelte
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: the slides scroll with CSS scroll snap, the block holds the current page in state and sets it from the Previous and Next buttons, and a swipe or a trackpad scroll moves between slides too. Going forward from the last quote returns to the first.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, from either button or from the quote area, which is a tab stop of its own. 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.