Skip to Content
ClientComponentsFAQ Component

FAQ Component

An accordion-style FAQ section to answer common questions and reduce support burden.

Location

src/components/FAQ/FAQ.tsx
src/components/FAQ/AccordionItem.tsx

Usage

app/page.tsx
import FAQ from '@/components/FAQ/FAQ'
 
export default function Home() {
  return <FAQ />
}

Configuration

Adding Questions

Edit the questions array in FAQ.tsx:

FAQ.tsx
const questions = [
  {
    label: 'What do I get with this boilerplate?',
    content: 'This boilerplate includes a full-stack setup with Next.js and React for the frontend, Node.js and Express for the backend, MongoDB with Mongoose for the database, Stripe for payment processing, and Resend for email services, all integrated with TypeScript for type safety.',
  },
  {
    label: 'How do I start a project with this boilerplate?',
    content: 'Clone the project, change the origin to your own repo, fill out the `.env` variables, and start filling out the other files.',
  },
  // Add more questions...
]

Question Structure

Each question has:

  • label - The question (shown in the accordion header)
  • content - The answer (shown when expanded)

Complete Example

FAQ.tsx
const questions = [
  {
    label: 'How long does it take to set up?',
    content: 'Most developers can get Fast Forward Dev running locally in under 10 minutes. Full customization typically takes 1-2 hours depending on your needs.',
  },
  {
    label: 'Do I need to know TypeScript?',
    content: 'Basic TypeScript knowledge is helpful, but not required. The codebase is well-documented and you can learn as you go. All types are already defined for you.',
  },
  {
    label: 'Can I use this for commercial projects?',
    content: 'Yes! The MIT license allows you to use Fast Forward Dev for any purpose, including commercial projects. You own the code once you purchase.',
  },
  {
    label: 'What if I need help?',
    content: 'We offer email support at emillykkeg@gmail.com. We typically respond within 24 hours. You can also check the documentation or GitHub issues.',
  },
  {
    label: 'Do you offer refunds?',
    content: 'Yes, we offer a 30-day money-back guarantee. If you\'re not satisfied for any reason, contact us for a full refund.',
  },
]

Styling

Section Layout

<section className="py-20 sm:px-10 pt-28 bg-base-100" id="faq">
  <div className="max-w-7xl mx-auto text-content grid grid-cols-1 lg:grid-cols-2">
    {/* Left: Title and description */}
    {/* Right: Accordion items */}
  </div>
</section>

Two-Column Layout

  • Left column: Title and description
  • Right column: Accordion questions

On mobile, stacks vertically.

Customizing the Title

<h2 className="font-bold text-3xl lg:text-4xl tracking-tight mb-8">
  Frequently Asked Questions
</h2>
<h5 className="text-lg lg:text-xl tracking-tight mb-8">
  Here are some of the most frequently asked questions. If you have
  any other questions, feel free to reach out to us on{' '}
  <a href="mailto:emillykkeg@gmail.com" className="underline">
    email
  </a>
  .
</h5>

Accordion Item Component

The AccordionItem component handles the expand/collapse functionality:

AccordionItem.tsx
<AccordionItem key={index} label={question.label}>
  {question.content}
</AccordionItem>

Features

  • Click to expand/collapse
  • Only one item open at a time (optional)
  • Smooth animation
  • Keyboard accessible

Best Practices

Writing Good FAQs

  1. Address Real Questions

    • Use actual customer questions
    • Check support emails for common issues
    • Look at competitor FAQs

  2. Be Specific

    • Give concrete answers
    • Include examples when helpful
    • Link to relevant documentation

  3. Keep Answers Concise

    • 2-3 sentences is ideal
    • Use bullet points for lists
    • Link to detailed docs for complex topics

  4. Organize by Priority

    • Put most common questions first
    • Group related questions
    • 5-10 questions is optimal

Question Categories

Common categories to cover:

Getting Started

  • How do I install it?
  • What do I need to know?
  • How long does setup take?

Features

  • What’s included?
  • What integrations are available?
  • Can I customize X?

Pricing & Licensing

  • What’s the license?
  • Do I get updates?
  • Can I use it commercially?

Support

  • How do I get help?
  • Do you offer refunds?
  • Where’s the documentation?

Adding Rich Content

You can include HTML in answers:

{
  label: 'What payment methods do you accept?',
  content: `We accept all major credit cards through Stripe:
    <ul>
      <li>Visa</li>
      <li>Mastercard</li>
      <li>American Express</li>
      <li>Discover</li>
    </ul>
    We also accept PayPal and Apple Pay.`
}

If you need complex formatting, consider using MDX or React components instead of HTML strings.

Customization

Change Background Color

<section className="py-20 sm:px-10 pt-28 bg-neutral" id="faq">

Single Column Layout

Remove the grid:

<div className="max-w-3xl mx-auto">
  <div className="text-center mb-12">
    {/* Title */}
  </div>
  <div>
    {/* Accordion items */}
  </div>
</div>

Add a search input to filter questions:

const [search, setSearch] = useState('')
 
const filteredQuestions = questions.filter(q =>
  q.label.toLowerCase().includes(search.toLowerCase()) ||
  q.content.toLowerCase().includes(search.toLowerCase())
)

SEO Benefits

FAQs help with SEO:

  • Answer user questions directly
  • Include keywords naturally
  • Can appear in Google’s “People also ask”
  • Reduces bounce rate by providing information

Adding Schema Markup

For better SEO, add FAQ schema:

<script type="application/ld+json">
  {JSON.stringify({
    "@context": "https://schema.org",
    "@type": "FAQPage",
    "mainEntity": questions.map(q => ({
      "@type": "Question",
      "name": q.label,
      "acceptedAnswer": {
        "@type": "Answer",
        "text": q.content
      }
    }))
  })}
</script>

Accessibility

The FAQ component is fully accessible:

  • Keyboard navigable
  • Screen reader friendly
  • Proper ARIA labels
  • Focus indicators

Next Steps

Last updated on
ButtonsFooter