Dark Spotlight
Dark accordion feature section with sliding indicator and spotlight panel.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| features | Array<{title, description, icon}> | 4 Uilora features | Array of feature items with title, description, and lucide icon. |
| title | string | Built for Uilora | Section heading text. |
| subtitle | string | Everything you need... | Section subtitle text. |
| accentColor | string | #5227FF | Accent color for active indicator and highlights. |
When to Use
Excellent for enterprise dashboards, dark-mode landing pages, and applications that want a high-contrast pro aesthetic with an accordion-based feature explorer.
Best Practices
Use on dark backgrounds for maximum impact. Keep features to 3-5 items for optimal scannability. Use descriptive icons that reinforce each feature's purpose.
Why This Component Matters
Accordion-driven spotlights create focus and exclusivity. The sliding indicator and animated panel transitions add a layer of polish that makes the section feel interactive and premium.
FAQ
QIs the spotlight panel dynamic?
Yes, the right panel updates with a smooth cross-fade animation whenever a different accordion item is selected.
QCan I change the active indicator?
Yes, the accentColor prop controls the vertical indicator bar and icon highlight color.
QIs it accessible?
The accordion uses proper click handlers and visual focus indicators for accessibility.
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.