Reviews Carousel
An elegant carousel component for displaying testimonials and reviews with smooth spring animations and keyboard navigation.
"SmoothUI has completely transformed how I build user interfaces. The animations are smooth, the components are well-designed, and the documentation is excellent. Highly recommend!
"I've been using SmoothUI for my latest project and I'm impressed by the quality of the components. The spring animations feel natural and the API is intuitive.
"The best part about SmoothUI is how easy it is to customize. I can create beautiful, animated interfaces without spending hours on implementation details.
"As someone who values both aesthetics and performance, SmoothUI hits the perfect balance. The components are performant and look amazing.
"The carousel component is particularly impressive. The spring physics make the interactions feel natural and delightful. Great work!
Installation
npx smoothui-cli add reviews-carouselFeatures
- 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-motionfor 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 |
Screen Reader
- Reviews use semantic
figureandfigcaptionelements withblockquotefor proper review structure. - Navigation state is communicated through disabled button states.
Reduced Motion
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.