Reviews Carousel

An elegant carousel component for displaying testimonials and reviews with smooth spring animations and keyboard navigation.

~9.3 kB

Last updated: August 2, 2026

Installation

npx smoothui-cli add reviews-carousel

Features

Smooth spring-based animations for card transitions
Keyboard navigation (Arrow keys)
Auto-play support with configurable interval
Customizable indicators and navigation buttons
Respects prefers-reduced-motion for accessibility
Stack-based card layout with depth effect
Blur and opacity effects for inactive cards

Accessibility

Keyboard Interactions

Key	Description
`ArrowLeft`	Navigate to the previous review
`ArrowRight`	Navigate to the next review

ARIA Attributes

Attribute	Element	Purpose
`aria-label`	Navigation buttons	Labels for "Anterior" (previous) and "Siguiente" (next) buttons
`aria-label`	Indicator buttons	Labels each indicator with its position number
`type="button"`	All buttons	Prevents implicit form submission
`disabled`	Navigation buttons	Disables previous/next when at the bounds

Reviews use semantic figure and figcaption elements with blockquote for proper review structure.
Navigation state is communicated through disabled button states.

This component respects the prefers-reduced-motion media query via useReducedMotion from Motion. When reduced motion is preferred, card scale, vertical offset, blur, and opacity transitions use instant 0ms durations instead of spring animations.