saturation/uisaturation/ui
DocsComponentsBlocksPagesEmails
GitHub

Sections

IntroductionComponentsInstallationMCPThemingDesign

Components

Components

General

AvatarBadgeButtonKbdProgressSeparatorSkeletonSpin ResolveSpinnerSync ButtonTypography

Forms & Inputs

Address LookupCalendar PickerCheckboxComboboxDate PickerEmoji PickerFavicon SearchFieldInputInput GroupInput OTPRadio GroupSelectSliderSwitchTextareaToggleToggle Group

Data Display

AccordionAlertCardChartComparison SliderCredit CardData TableEmptyItemSaturation Credit CardTableTree

Navigation

BreadcrumbCommandMenubarNavigation MenuPaginationTabs

Overlays

CollapsibleContext MenuDialogDropdown MenuSheet

Layout

Button GroupFont ProviderWizard Split Layout

Feedback

Sonner

Animation & Effects

Animated GroupAnimated ListAnimated NumberBeamBlur FadeBorder TrailGlow EffectLiquid MetalLoading StateParallaxPixelProgressive BlurRippleSpotlightText EffectText Shimmer

Productivity

Agent ChatAI Chat InputCoding AgentFiltersFull CalendarKanbanNovel Editor

Testimonial Carousel

An auto-advancing testimonial carousel with animated transitions, star ratings, avatar attribution, and progress dots.

What our customers are saying

This completely transformed how we manage our production budgets. Real-time visibility into spending changed everything for our team.

SC

Sarah Chen

IMDb

Executive Producer, Horizon Pictures

G2G2

Features

  • Auto-advancing — Cycles through testimonials with configurable interval
  • Pause on hover — Stops auto-advance when user hovers
  • Animated transitions — Smooth fade + slide via motion/react
  • Star ratings — Optional 1-5 star display
  • Avatar attribution — Composes Avatar component with image or initials fallback
  • Progress dots — Clickable dots with active indicator
  • Reduced motion — Respects prefers-reduced-motion

API Reference

PropTypeDefaultDescription
itemsTestimonial[]-Array of testimonial objects
titlestring"What our customers are saying"Section heading
intervalnumber6000Auto-advance interval in ms (0 to disable)
classNamestring-Additional className for the section

Components Used

avatar