shadcn.io is not affiliated with official shadcn/ui
Triple Stack Vertical Carousel Testimonials Block for React
A 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.
Installation
Overview
Show three voices at once and let visitors step through the rest, for React with Base UI. It's a reverse split between the page's rails. On the end side, after a hairline divider with plus marks where it meets the page's top rule, sit a headline ("Three voices at a time", with a bold lead about Tallyfold, a fictional operations workspace), up and down buttons and a plain "Quotes 2 to 4 of 6" count. On the start side, a hairline frame with plus marks on its corners is a fixed-height window onto six customer quotes, three ruled rows in view. Each press moves the list by a single row, so every quote gets its moment in the middle, and the buttons dim at either end of the list. Below lg the copy comes first and a hairline with plus marks runs between it and the window. It's built from the Carousel in its vertical orientation, Avatar, Button and Guides, with Lucide icons, CSS only and your theme's tokens; it has no primary button. For landing pages that want more social proof in one view than a single-quote slider gives, without a long wall of cards.
FAQ
How do I change the quotes, or how many are in view?
Edit the TESTIMONIALS array at the top of the file: each entry has an author, role, company, two-letter initials and the quote. VISIBLE is the number of rows in view (three); the last page, the count and which rows are interactive all follow from it and the length of the array. If you show more or fewer rows, adjust the height of the window (h-[34rem] on phones and sm:h-[27rem] above) so each row has room for its quote.
How does the carousel work on each library?
basis-1/3). The block reads the position from Embla's select event, and moves with scrollTo. Dragging is switched off (watchDrag: false), so a vertical swipe over the window scrolls the page instead of being caught by it.How do visitors use it with a keyboard?
Tab to the up and down buttons and press them, or press the up and down arrow keys, Home or End on either button, or on the quote window itself, which takes focus and is named "Quotes in view". The buttons are marked unavailable at the ends rather than removed, so focus stays where it is. The rows that are out of view are inert, so Tab never lands inside one.
What does a screen reader announce?
The block is a carousel region named "Customer quotes", and each quote is a group named by its author and position, such as "Noor Siddiqui, quote 3 of 6". When a visitor moves the rows, a polite live region says which quotes are now showing ("Quotes 2 to 4 of 6"); nothing is announced on load. Quotes out of view are hidden from assistive technology.
What changes when a visitor prefers reduced motion?
The header and the quote window appear without fading in. Nothing moves on its own, so there's no autoplay to pause; the rows still slide when a button is pressed.
Does it work in right-to-left languages?
Yes. The split swaps sides with its divider, the headline and the controls follow the reading direction, the caption follows the reading direction, and each quote sits in a bdi so its quotation marks stay with the sentence. The window scrolls vertically, which is the same in both directions.
Related
- 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
Stack Overlap Scroll Testimonials
Rows and listsQuotes from teams on a developer platform that pile up as you scroll: each note is a full-width band between the rails with its own top rule and + marks, every band sticks near the top and the next slides over it, leaving each covered band's name strip visible. A Shine Button sits in the header.
- Pro
Quote Carousel Testimonials with Next-Speaker Preview
Carousels and decksA 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.
- 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
Centered Testimonial Card Grid Hero
TestimonialsA centred showcase hero with a headline, a Shine Button and an outline action over a wall of six customer quotes in cells that share their hairlines, a snap carousel on a phone.
- Pro
Quote Carousel Testimonials
Carousels and decksA split testimonials carousel for a CI service: the heading and a Shine Button beside a raised card in a tinted shell that follows the theme, advancing by itself under a story-style progress bar with pause, previous and next.