Dark Spotlight
Premium dark spotlight testimonial cards with hover effects.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| testimonials | TestimonialItem[] | [] | Array of testimonial items with id, name, role, company, content/text, media, avatar/image. |
| backgroundColor | string | #050505 | Background color of the component (hex, rgb, or hsl). |
| badgeText | string | Excellence | Text displayed in the badge. |
| badgeTextColor | string | #D4AF37 | Text color of the badge (hex, rgb, or hsl). |
| title | string | Client Success Stories | Main title text. |
| titleColor | string | #ffffff | Color of the title text (hex, rgb, or hsl). |
| cardBgColor | string | rgba(23, 23, 23, 0.5) | Background color of the testimonial cards (hex, rgb, or hsl). |
| cardBorderColor | string | #262626 | Border color of the testimonial cards (hex, rgb, or hsl). |
| cardHoverBorderColor | string | rgba(212, 175, 55, 0.5) | Border color of cards on hover (hex, rgb, or hsl). |
| spotlightColor | string | rgba(212, 175, 55, 0.1) | Color of the spotlight effect (hex, rgb, or hsl). |
| spotlightSize | number | 600 | Size of the spotlight effect in pixels. |
| quoteIconColor | string | #404040 | Color of the quote icon (hex, rgb, or hsl). |
| quoteTextColor | string | #d4d4d4 | Color of the quote text (hex, rgb, or hsl). |
| avatarGrayscale | boolean | true | Whether to apply grayscale filter to avatars. |
| avatarOpacity | number | 0.7 | Opacity of avatar images (0-1). |
| authorNameColor | string | #ffffff | Color of the author name text (hex, rgb, or hsl). |
| authorRoleColor | string | #D4AF37 | Color of the author role text (hex, rgb, or hsl). |
| dividerColor | string | #262626 | Color of dividers (hex, rgb, or hsl). |
When to Use
Ideal for enterprise service providers, high-end consulting firms, and Next.js applications that want a luxury 'Pro' aesthetic. Use this React component for a premium dark-mode testimonial section with gold accents and a dynamic spotlight effect.
Best Practices
Maintain consistent spacing within your design system by using it on pure black or deep navy backgrounds. Follow React best practices by using light, airy typography. Optimize for performance by using hardware-accelerated transforms for the mouse-tracking spotlight.
Why This Component Matters
Luxury aesthetics communicate exclusivity and trust. This production-ready component provides a refined version of social proof, adding a layer of architectural depth and perceived value to your client stories.
FAQ
QHow does the spotlight work?
The spotlight effect follows the user's cursor across the cards, highlighting the specific testimonial they are currently reading.
QCan I remove the grayscale filter?
Yes, the `avatarGrayscale` prop can be set to `false` if you prefer to show author photos in their original colors.
QIs the gold color required?
While designed for gold (`#D4AF37`), the `badgeTextColor` and `authorRoleColor` props allow you to use any accent color that fits your brand.
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.