Dark Spotlight
Dark spotlight feature section with accordion interactions.
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 |
|---|---|---|---|
features | Array<{title: string, desc: string, icon?: LucideIcon}> | [] | Array of feature items with title, description, and optional icon. |
backgroundColor | string | #171717 | Background color (hex, rgb, or hsl). |
title | string | Designed for the | Section title text. |
titleHighlight | string | modern enterprise | Highlighted title text. |
activeBarColor | string | #ffffff | Active item bar color. |
activeTextColor | string | #ffffff | Active item text color. |
inactiveTextColor | string | #525252 | Inactive item text color. |
cardBgColor | string | #262626 | Card background color. |
iconColor | string | #525252 | Icon color. |
Related Components
When to Use
Excellent for enterprise dashboards, dark-mode landing pages, and Next.js applications that want a high-contrast ‘Pro’ aesthetic. Use this React component for an accordion-based feature section with a central spotlight image and smooth text reveals.
Best Practices
Maintain consistent spacing within your design system by using it on dark or textured backgrounds. Follow React best practices by pairing it with high-contrast text. Optimize for performance by managed the spotlight image loading and resizing.
Why This Component Matters in Modern UI Development
Spotlight-driven accordions create a sense of focus and exclusivity. 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
QIs the spotlight image dynamic?
Yes, the central image updates based on the currently selected accordion item, with a smooth cross-fade animation.
QCan I change the active indicator?
The `activeBarColor` prop allows you to customize the vertical line that marks the selected feature to match your brand's color.
QIs it accessible?
The accordion uses semantic HTML and supports keyboard navigation for high accessibility standards.