FAQ Dark
Dark-themed card FAQ with accent-colored border glow on the active item and a 'View more' inline link.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| accentColor | string | "#a78bfa" | Accent color for the active border glow, icon, divider line, and View more link. |
| items | FAQItem[] | DEFAULT_ITEMS | Array of FAQ items — each needs a question string and an answer string. |
| title | string | "Frequently Asked" | Section heading above the accordion. |
| eyebrow | string | "Uilora Support" | Small mono eyebrow label above the title. |
When to Use
Drop this into any dark-themed product page as a support FAQ, feature explainer, or documentation section. The card layout keeps items visually separated and easy to scan.
Best Practices
Use 4–6 questions for ideal density. Keep answers under 3 sentences — the 'View more' link implies there's more to read if needed. Purple or cyan work best as accent colors on dark.
Why This Component Matters
Most dark FAQ implementations use flat dividers. The subtle border glow on the active card adds visual hierarchy without heavy contrast — users instantly know which item is open.
FAQ
QHow does the glow work?
The active item gets a 1px border at accentColor + '35' opacity plus a box-shadow with accentColor + '08' — subtle enough to avoid visual noise, strong enough to communicate state.
QCan I keep multiple items open?
Change the state to a Set<number> and toggle membership instead of setting a single index. AnimatePresence handles multiple simultaneous open items.
QCan I remove the View more link?
Yes — it's a plain button inside the expanded content div. Delete or replace it with your own CTA.
Related Components
Liquid Stretch
Smooth liquid motion accordion with natural spring animations.
Split Screen
Split screen accordion with expanding image partitions — click a panel to reveal its content.
Audio Reactive
Audio-reactive accordion with animated waveform bars and a progress track.