FAQs Accordion
An interactive accordion component for frequently asked questions with smooth expand/collapse animations.
Configuring your account...
Please wait while we prepare everything for you
Usage
import FaqsAccordion from '@/components/bynanaui/faqs-accordion'
<FaqsAccordion
title="Frequently Asked Questions"
description="Find answers to common questions about our product and services"
faqs={[
{
question: "What is LumeUI?",
answer: "LumeUI is a modern UI component library that provides beautiful, animated components for building stunning user interfaces."
},
{
question: "How do I get started?",
answer: "Getting started is easy! Simply install the package via npm or yarn, import the components you need, and start building."
}
]}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | "Frequently Asked Questions" | Main heading text |
description | string | Default description | Subtitle description text |
faqs | Array<FaqItem> | Default FAQs array | Array of FAQ items |
className | string | "" | Additional CSS classes |
FaqItem Type
| Property | Type | Description |
|---|---|---|
question | string | The FAQ question |
answer | string | The FAQ answer |
Features
- Smooth Animations: Height and opacity transitions using Framer Motion
- Single Expand: Only one FAQ can be open at a time
- Hover Effects: Interactive hover states with border color changes
- Keyboard Accessible: Proper focus management and keyboard navigation
- Responsive Design: Works well on all screen sizes
- Customizable: Easy to modify styling and behavior
- Icon Rotation: Chevron icon rotates when expanding/collapsing
