Horizontal Gallery
Horizontal scrolling testimonial gallery with smooth transitions.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| testimonials | TestimonialItem[] | [] | Array of testimonial items with id, name, role, company, content/text, media, avatar/image. |
| backgroundColor | string | #ffffff | Background color of the component (hex, rgb, or hsl). |
| textColor | string | #000000 | Default text color (hex, rgb, or hsl). |
| title | string | REAL STORIES | Main title text (supports newlines with \n). |
| titleColor | string | #000000 | Color of the title text (hex, rgb, or hsl). |
| arrowColor | string | #000000 | Color of arrow icons (hex, rgb, or hsl). |
| cardBgColor | string | #f5f5f5 | Background color of the testimonial cards (hex, rgb, or hsl). |
| companyBadgeBgColor | string | #ffffff | Background color of company badges (hex, rgb, or hsl). |
| companyBadgeTextColor | string | #000000 | Text color of company badges (hex, rgb, or hsl). |
| quoteColor | string | #000000 | Color of the quote text (hex, rgb, or hsl). |
| quoteItalic | boolean | true | Whether to display quotes in italic. |
| authorNameColor | string | #000000 | Color of the author name text (hex, rgb, or hsl). |
| authorBorderColor | string | rgba(0,0,0,0.1) | Border color of author sections (hex, rgb, or hsl). |
| ctaCircleBgColor | string | #000000 | Background color of the CTA circle (hex, rgb, or hsl). |
| ctaCircleTextColor | string | #ffffff | Text color of the CTA circle (hex, rgb, or hsl). |
| ctaText | string | Join the Revolution | CTA text content (supports newlines with \n). |
When to Use
Excellent for marketing-heavy landing pages, creative agencies, and Next.js sites that want a high-impact, lateral scrolling experience. Use this React component for a horizontal gallery that moves cards along a track as the user scrolls or drags.
Best Practices
Maintain consistent spacing within your design system by using it for showcase sections that require focus on individual cards. Follow React best practices by using high-contrast arrow icons. Optimize for performance by using hardware-accelerated transforms.
Why This Component Matters
Horizontal galleries provide a curated, linear way to explore user stories. This production-ready UI component helpsคุณ build an interface that feels expansive and narrative-driven, improving user discovery of multiple testimonials.
FAQ
QIs it draggable?
Yes, users can navigate the gallery either by scrolling horizontally, using the provided arrow buttons, or dragging on touch devices.
QHow many cards can I include?
The component is optimized for 3-7 high-quality cards, but it can handle more as the track expands horizontally to accommodate the array.
QWhat is the CTA circle?
The gallery ends with a dedicated 'Call to Action' circle, encouraging users to join the community after reading the testimonials.
Related Components
Uilora Dynamic
Interactive tiered pricing calculator with seat slider, billing toggle, and real-time cost breakdown.
Uilora Cloud Slider
Dark navy 3-plan cloud pricing with per-card sliders, add-on checkboxes, and live price calculation.
Uilora Matrix
Feature comparison matrix with 3 plans, monthly/yearly toggle, Pro spotlight, check/cross icons.
Built something cool?
Share your work with 10k+ devs — or tell us how we can improve.