Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Testimonials blocks

Pro

Testimonials Multi-Up Carousel Block for React

A 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.

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

A testimonials carousel for when you have more quotes than room, from a fictional accounting platform, Ledgerline. A start-aligned heading cluster sits at the left of one row and the controls at the right: a "Page 1 of 2" count with a previous and a next button. Below, six quotes sit in one band with a rule above and below and + marks on its corners, in cells ruled apart by hairlines: three to a page on a wide screen, two on a tablet and one on a phone; the count follows, so the same six quotes are "Page 1 of 2", "Page 1 of 3" or "Page 1 of 6". Each cell has five stars in the text colour, the quote with its first sentence in bold and the rest muted, and the author's avatar, name, role and company. Nothing moves on its own, so there is no autoplay to pause. It's built from Carousel, Avatar, Button and Guides, with CSS transitions for the entrance. For homepages, product pages and pricing pages that want six or more quotes in the room of one row of cells.

FAQ

How do I change the quotes?

Edit REVIEWS at the top of the file: each entry has a lead (the opening sentence, in bold), the rest of the quote, and the person's name, role, company and initials. Every card shows five stars; the rating is decorative, so a screen reader reads "Rated 5 out of 5" and nothing is counted or averaged. Keep the number of quotes divisible by 2 and 3 (six or twelve) so the last page is full at every width; with another number the last page simply holds fewer cells.

How are the cells per page chosen?

By screen width, from Tailwind's md and lg breakpoints: each slide is basis-full md:basis-1/2 lg:basis-1/3, with no gap, and the hairline between cells is the end border of every cell except the last on a page. Embla's slidesToScroll: "auto" turns that into pages, so the count and the buttons follow the width without any media query in the block.Turn the browser window narrower or wider and the page count updates to match.

How does the carousel work on each library?

It's the Carousel built on Embla: setApi hands the block Embla's API, its select and reInit events keep the current page and the page count in step, and scrollTo moves to a page from the buttons. The direction comes from Base UI's own provider, so the pages move the right way on a right-to-left page. Slides on other pages are inert.The previous and next buttons wrap around, from the last page to the first, so they never end up disabled under a visitor's focus.

Can visitors page through the quotes with a keyboard?

Yes. The previous and next buttons are real buttons in the tab order, and with focus on either of them the left and right arrow keys turn the page too. The cells on other pages are inert, so Tab never lands on a card that isn't on screen.

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 "Felix Brandt, 2 of 6". The quote is a blockquote inside a figure with the author as the caption; the stars and the avatar are hidden, and the rating is read as text. When a visitor turns the page, the new cells are announced politely, and the "Page 1 of 2" count is read as plain text.

What changes with reduced motion, and what about right-to-left?

The heading and the cells appear without their entrance. Turning the page still works the same way; nothing moves on its own. In a right-to-left page the layout mirrors: the heading moves to the end and the controls to the start, their arrows flip, and the first cell is at the start.

  • Pro

    Testimonials Film Strip

    Carousels and decks

    A reel of quote cells of different widths in one sideways scroll area: hairlines between the cells, frame numbers, an always-visible scrollbar, faded edges, gentle snapping and a Shine Button in the header.

  • Pro

    Triple Stack Vertical Carousel Testimonials

    Carousels and decks

    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.

  • Pro

    Testimonials Centre-Mode Carousel

    Carousels and decks

    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.

  • Pro

    Testimonials Portrait Carousel

    Carousels and decks

    Customer 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

    Cards Testimonials

    Quote grids

    Three customer quotes for an invoicing app in cells apart on hairline frames with + marks, each led by its result, with the middle one raised and a header that carries the rating and one Shine Button.

  • Pro

    Centered Testimonial Card Grid Hero

    Testimonials

    A 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.

All 100 testimonials blocks