FAQ Light
Clean minimal light accordion with circular +/− icons, bullet-point sub-content, and a Learn more CTA per item.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| accentColor | string | "#6366f1" | Accent color for the toggle icon border/fill, bullet dots, and Learn more button. |
| items | FAQItem[] | DEFAULT_ITEMS | Array of items — each needs a question, answer, and optional points string array. |
| title | string | "Uilora Components" | Section heading above the accordion. |
| subtitle | string | "A vertically stacked..." | Supporting text below the heading. |
When to Use
Best for documentation sites, SaaS dashboards, and any product context that calls for a clean, accessible FAQ that doesn't compete with the surrounding content.
Best Practices
Use the points array to surface 2–4 key takeaways before the full answer — this improves scannability for users who skim. Keep the Learn more button to one CTA per item.
Why This Component Matters
The circular icon with a rotation transform is a small detail that reads as polish. Combined with the light background expand state, it creates a accordion that feels designed, not default.
FAQ
QHow do I remove the bullet points?
Omit the points array on any item. The component checks if (item.points) before rendering the bullet section.
QCan I replace Learn more with a link?
Yes — replace the button with an anchor tag. The styling class 'text-xs font-semibold px-4 py-2 rounded-lg text-white' on the anchor will match perfectly.
QCan I open multiple items at once?
Replace the single active index state with a Set<number>. The AnimatePresence exit animation handles concurrent open items natively.
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.