Dark Spotlight
Dark spotlight FAQ with radial hover effects.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| faqs | Array<{q: string, a: string}> | [] | Array of FAQ items with question (q) and answer (a). |
| backgroundColor | string | #000000 | Background color (hex, rgb, or hsl). |
| badgeText | string | Support Center | Badge text displayed above title. |
| badgeBgColor | string | rgba(23, 23, 23, 0.5) | Badge background color. |
| badgeBorderColor | string | #262626 | Badge border color. |
| badgeTextColor | string | #a3a3a3 | Badge text color. |
| title | string | Frequently Asked Questions | Section title text. |
| titleGradientFrom | string | #ffffff | Title gradient start color. |
| titleGradientTo | string | rgba(255,255,255,0.4) | Title gradient end color. |
| cardBgColor | string | rgba(23, 23, 23, 0.3) | Card background color. |
| cardBorderColor | string | #262626 | Card border color. |
| cardTextColor | string | #e5e5e5 | Card text color. |
| hoverCardTextColor | string | #ffffff | Card text color on hover. |
| answerTextColor | string | #a3a3a3 | Answer text color. |
| iconColor | string | #737373 | Icon color. |
| hoverIconColor | string | #ffffff | Icon color on hover. |
| spotlightColor | string | rgba(255,255,255,0.1) | Spotlight effect color. |
When to Use
Excellent for dark mode landing pages, premium developer tools, and Next.js sites that want a mysterious, high-end aesthetic. Use this React component for a subtle FAQ section with radial spotlight hover effects and glowing gradients.
Best Practices
Maintain consistent spacing within your design system by using this on dark or textured backgrounds. Follow React best practices by pairing it with high-contrast text. Optimize for performance by managed the spotlight calculation for high-DPI displays.
Why This Component Matters
Spotlight effects create a sense of exclusivity and focus. This production-ready component provides a refined version of this aesthetic, adding a layer of visual excitement and perceived value to your interface.
FAQ
QHow does the spotlight work?
The component tracks mouse movements and applies a radial gradient mask to create a localized glow on the active card.
QIs it too dark for readability?
It uses a sophisticated balance of low-opacity backgrounds and high-contrast text to ensure accessibility while maintaining the dark aesthetic.
QCan I change the glow color?
Yes, the `spotlightColor` prop allows you to customize the glow to match your brand's primary or secondary colors.
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.