shadcn.io is not affiliated with official shadcn/ui
Testimonials Centre-Mode Carousel Block for React
A centre-mode quote carousel for a support inbox: a centred header with a Shine Button above one hairline band, where the active quote sits in the middle on a raised card with its neighbours peeking in, with previous and next buttons, a dot per quote and arrow-key control.
Installation
Overview
A testimonials carousel for React with Base UI with one voice in focus and the next ones in sight. A short centred header names the product (a support inbox) and holds the block's one primary button, a Shine Button. Below it, one band between two hairlines, with + marks on its corners, holds a track of quote cards: the active card is in the middle at full size, raised on the card surface with a ring and a shadow, and the cards on either side step back, smaller and see-through, so a visitor can see there is more to read. Each card holds a quote mark, the quote in a large, calm size, and the author's avatar, name, role and company. Under the track, previous and next buttons sit either side of a dot per quote. The buttons wrap around, so they never end up disabled under a visitor's focus. Nothing moves on its own, so there is no autoplay to pause. It's built from Carousel, Guides, Avatar, Button and Shine Button, with CSS transitions for the entrance and for the active card. For homepages and landing pages where several voices are better than one but a grid is too much.
FAQ
How do I change the quotes?
Edit VOICES at the top of the file: each entry has a quote, the person's name, role, company and initials. The dots, the slide names and the buttons all come from the list, so any number of quotes works; five to seven is a comfortable length. Give each quote a unique name, since it keys the card and its dot.
How much of the neighbouring quotes shows, and can I change it?
SLIDE constant: the track less 16% on both sides (never less than 1.5rem or more than 10rem). Embla's align: "center" puts the active slide in the middle, and containScroll is off so the first and last slides can be centred too.Raise the percentage to show more of the neighbours and shrink the active card, or lower it to do the opposite. On a phone the neighbours are a thin sliver at the edges, which is enough to say there is more.How does the carousel work on each library?
setApi hands the block Embla's API, its select event keeps the active quote in step, and scrollTo moves to a quote from a button or a dot. The direction comes from Base UI's own provider, so the cards move the right way on a right-to-left page. Slides out of view are inert.Can visitors move between quotes with a keyboard?
Yes. The previous and next buttons and every dot are real buttons, each named ("Show the quote from Mateo Vargas"), and the current dot is marked as current. With focus on any of them, the left and right arrow keys move to the previous or next quote too. The two cards beside the active one are inert, so Tab never lands on a card that isn't the one in the middle.
What does a screen reader announce?
The carousel is a region named "Customer quotes" and each slide is a group named by its person and position, such as "Yuki Tanaka, 5 of 5". The quote is a blockquote inside a figure with the author as the caption; the quote mark and the avatar are decorative and hidden. When a visitor moves to another quote, the new one is announced politely. The neighbouring cards are hidden from screen readers, so only the active quote is read.
What changes with reduced motion, and what about right-to-left?
The header and the track appear without their entrance, the active card changes size and background at once instead of easing, and the faded edges are dropped. Moving between quotes still works the same way. In a right-to-left page the buttons swap sides and their arrows mirror, and the quotes move the other way.
Related
- 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
Testimonials Portrait Carousel
Carousels and decksCustomer stories for a site builder on slides in one hairline band: each pairs a framed portrait, a monogram on a grid with the result the customer got, with the quote, split by a divider, and a footer row with a 01 / 04 count and previous and next buttons, under a header with one Shine Button.
- Pro
Testimonials Speaker Switcher
Logos and facesA band of avatar-and-name chips for five customers: choose one and the large quote in a raised card in a card below changes to theirs, with arrow-key control between the chips, one scrolling row on phones, and a polite announcement of the change.
- Pro
Testimonials Multi-Up Carousel
Carousels and decksA quote carousel for an accounting platform that shows one, two or three cells per page by screen width, in a hairline-ruled band, paged with previous and next buttons and a Page 1 of 2 count in the heading row, or with the arrow keys.
- “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.