Dark Spotlight
Dark spotlight FAQ with radial hover effects.
Main Features of Dark Spotlight
How to Use Dark Spotlight in Next.js
Installation Guide for Dark Spotlight
Props
Customize the component with these 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. |
Related Components
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 in Modern UI Development
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.
Frequently Asked Questions
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.