FAQs Grid
A tabbed FAQ component with categorized questions, icons, and grid layout for better organization.
Configuring your account...
Please wait while we prepare everything for you
Usage
import FaqsGrid from '@/components/bynanaui/faqs-grid'
<FaqsGrid
title="FAQs"
description="Discover quick and comprehensive answers to common questions about our platform, services, and features."
categories={[
{
name: "General",
id: "general",
faqs: [
{
question: "How do I install LumeUI?",
answer: "You can install LumeUI using npm or yarn. Run npm install lumeui in your project directory.",
icon: "Download"
}
]
}
]}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | "FAQs" | Main heading text |
description | string | Default description | Subtitle description text |
categories | Array<FaqCategory> | Default categories array | Array of FAQ categories |
className | string | "" | Additional CSS classes |
FaqCategory Type
| Property | Type | Description |
|---|---|---|
name | string | Category display name |
id | string | Unique category identifier |
faqs | Array<FaqGridItem> | Array of FAQs in this category |
FaqGridItem Type
| Property | Type | Description |
|---|---|---|
question | string | The FAQ question |
answer | string | The FAQ answer |
icon | string | Lucide React icon name |
Features
- Tabbed Interface: Organize FAQs into logical categories
- Icon Integration: Each FAQ has an associated Lucide React icon
- Grid Layout: Responsive 3-column grid on desktop, adapts on mobile
- Tab Animations: Smooth transitions between categories with layout animations
- Active Indicators: Visual feedback for the currently selected tab
- Staggered Animations: FAQs animate in with delays for visual appeal
- Professional Design: Clean, modern aesthetic suitable for business use