Landing Page FAQ Collapsible Component

Updated on

This component displays a collapsible list of frequently asked questions and their answers.

FAQ

Looking to learn more about our product? Here are some of the most common questions.

Usage

import { LandingFaqCollapsibleSection } from '@/components/landing/LandingFaqCollapsible';

const faqItems = [
  {
    question: 'Can I get a refund?',
    answer:
      'Yes, you can get a refund within 30 days of your purchase. No questions asked.',
  },
  {
    question: 'What technologies are used?',
    answer: 'We use Next.js, Tailwind CSS, and Vercel for the deployment.',
  },
  {
    question: 'What do I get if I pre-order?',
    answer:
      'With the pre-order, you get a 50% discount on the final price and a lifetime license for the generated code.',
  },
];
<LandingFaqCollapsibleSection
  title="FAQ"
  description="Looking to learn more about our product? Here are some of the most common
  questions."
  faqItems={faqItems}
/>

Examples

With Background

FAQ

Looking to learn more about our product? Here are some of the most common questions.

With Background Glow

FAQ

Looking to learn more about our product? Here are some of the most common questions.

API Reference

Prop NameProp TypeRequiredDefault
title string ǀ React.ReactNodeNo-
titleComponent React.ReactNodeNo-
description string ǀ React.ReactNodeNo-
descriptionComponent React.ReactNodeNo-
faqItems FaqItem[]Yes-
withBackground booleanNofalse
withBackgroundGlow booleanNofalse
variant 'primary' ǀ 'secondary'No'primary'
backgroundGlowVariant 'primary' ǀ 'secondary'No'primary'
export interface FaqItem {
  question: string;
  answer: string;
}

More Examples

For more even more examples, see our Landing Page Component Examples page or see complete landing page examples by Exploring Our Landing Page Templates.