Reviews Carousel
betaTestimonials stacked in depth — the active review in front, the next ones receding behind — stepped through with buttons, indicators or arrow keys.
- Display
- 2 files
- 1 npm package
- Accessibility notes
Loading the example…
pnpm dlx @dowel-ui/cli add reviews-carouselnpm packages installed: class-variance-authority.
import { ReviewsCarousel } from "@/components/ui/reviews-carousel";Default
Gallery
With Avatars
Looping
Controlled
Right To Left
<ReviewsCarousel>
| Prop | Type | Default |
|---|---|---|
reviews (required) | Review[] | — |
autoPlayAdvances on a timer, with a stop/start control; never starts by itself under reduced motion. | boolean | false |
autoPlayIntervalMilliseconds per review while playing. | number | 5000 |
defaultIndexInitial active review when uncontrolled. | number | — |
indexControlled active review. | number | — |
labelsVisible and accessible text, for localisation. | Partial<ReviewsCarouselLabels> | — |
loopWrap from the last review to the first. The source stops at the ends. | boolean | false |
onIndexChange | (index: number) => void | — |
showIndicators | boolean | true |
showNavigation | boolean | true |
Plus every attribute of <section> except children.
Follows the APG carousel pattern: a section with aria-roledescription="carousel", each review a labelled group with aria-roledescription="slide", and only the active one exposed (the rest are aria-hidden and inert). Previous/next buttons and indicator buttons are named, the current indicator carries aria-current, and the end buttons use aria-disabled so focus is never dropped. Arrow keys (mirrored in RTL), Home and End work while focus is inside. `autoPlay` adds a stop/start control, pauses on hover and focus, turns the live region off while rotating, and does not start by itself under reduced motion.
10/10
checks passed
- Tested — passes
- axe assertion — passes
- Keyboard tested — passes
- Storybook examples — passes
- Accessibility documented — passes
- Semantic tokens only — passes
- Motion from tokens — passes
- className merged — passes
- Visible focus — passes
- No fixed widths — passes