Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Carousel blocks

Pro

Mirrored Testimonial Carousel Block for React Aria

Five customer quotes, one per slide, beside a Reading direction switch that mirrors the whole carousel, its slide order, arrows, snapping and keys, while the quotes stay as written.

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

Check how a carousel reads in both directions, with this testimonial carousel for React with React Aria. Applause Desk, a feedback inbox, shows five short customer quotes, each with a row of stars, the quote, a name and a role. At the start of the panel a Segment Group "Reading direction: Left to right, Right to left" mirrors the carousel itself: the order of the slides, the arrows, where each slide snaps and the arrow keys all flip, while the quotes stay as written. At the end of the panel the track has a foot with a status line ("Reading right to left, quote 1 of 5"), Previous and Next Buttons and a dot for each quote. A phone stacks the switch over the track and shows a quote with the next peeking. It's built from Carousel, Segment Group, Button, Avatar and Guides. The quotes and the people are made up.

FAQ

How do I use my own quotes?

Edit QUOTES. Each has an id, initials, a name, a role, the quote and stars out of five. Use real quotes only with permission. Names and quotes are set with dir="auto", so a quote in Arabic or Hebrew sets itself right to left inside a left-to-right carousel.

What does the switch change?

Only the carousel's direction. A new reading direction wraps the track in a direction provider and sets dir on its container, so the slides run the other way round, the first quote sits at the end side, the arrows swap icons, and Previous means the earlier quote in either direction. Embla gets direction: "rtl" from the same state.

How does it work with a keyboard?

Tab reaches the switch, Previous, Next and the dots. With focus inside the carousel, the arrow keys follow the reading direction: the end-side arrow always goes to the next quote. Home and End jump to the first and last quote. The buttons are marked unavailable at the ends rather than disabled.

What is announced when it moves?

The status line is the one polite live region: "Reading left to right, quote 2 of 5". Flipping the switch updates it too, so the change is heard.

What stays local in the demo?

The switch and the position. Nothing is saved. In a real site the direction comes from the language of the page, not from a switch; keep the switch for a demo or a settings page.

How does it look on a phone?

The switch sits above the track, the quote shows with the next one peeking, and the dots sit under the status line and the buttons.

All 100 carousel blocks