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

PropTypeDefaultDescription
titlestring"FAQs"Main heading text
descriptionstringDefault descriptionSubtitle description text
categoriesArray<FaqCategory>Default categories arrayArray of FAQ categories
classNamestring""Additional CSS classes

FaqCategory Type

PropertyTypeDescription
namestringCategory display name
idstringUnique category identifier
faqsArray<FaqGridItem>Array of FAQs in this category

FaqGridItem Type

PropertyTypeDescription
questionstringThe FAQ question
answerstringThe FAQ answer
iconstringLucide 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