UI ComponentsMarketing
FAQ
Frequently asked questions section with expandable items
Frequently asked questions section with expandable accordion items.
Structure
Accordion Layout (Default)
┌─────────────────────────────────────────────────────┐
│ root │
│ ┌─────────────────────────────────────────────────┐ │
│ │ header │ │
│ │ title │ │
│ │ subtitle │ │
│ └─────────────────────────────────────────────────┘ │
│ ┌─────────────────────────────────────────────────┐ │
│ │ search (optional) │ │
│ │ ┌─────────────────────────────────────────────┐ │ │
│ │ │ 🔍 Search questions... │ │ │
│ │ └─────────────────────────────────────────────┘ │ │
│ └─────────────────────────────────────────────────┘ │
│ ┌─────────────────────────────────────────────────┐ │
│ │ items │ │
│ │ ┌─────────────────────────────────────────────┐ │ │
│ │ │ item (expanded) │ │ │
│ │ │ ┌─────────────────────────────────────────┐ │ │ │
│ │ │ │ trigger │ │ │ │
│ │ │ │ What is your refund policy? [-] │ │ │ │
│ │ │ └─────────────────────────────────────────┘ │ │ │
│ │ │ ┌─────────────────────────────────────────┐ │ │ │
│ │ │ │ content │ │ │ │
│ │ │ │ We offer a 30-day money-back guarantee │ │ │ │
│ │ │ │ on all purchases. Simply contact our │ │ │ │
│ │ │ │ support team to request a refund. │ │ │ │
│ │ │ └─────────────────────────────────────────┘ │ │ │
│ │ └─────────────────────────────────────────────┘ │ │
│ │ ┌─────────────────────────────────────────────┐ │ │
│ │ │ item (collapsed) │ │ │
│ │ │ How do I get started? [+] │ │ │
│ │ └─────────────────────────────────────────────┘ │ │
│ │ ┌─────────────────────────────────────────────┐ │ │
│ │ │ item (collapsed) │ │ │
│ │ │ Do you offer enterprise plans? [+] │ │ │
│ │ └─────────────────────────────────────────────┘ │ │
│ └─────────────────────────────────────────────────┘ │
│ ┌─────────────────────────────────────────────────┐ │
│ │ contact │ │
│ │ Still have questions? │ │
│ │ Contact our support team for help. │ │
│ │ [Contact Support →] │ │
│ └─────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────┘Two-Column Layout
┌─────────────────────────────────────────────────────┐
│ items │
│ ┌───────────────────────┐ ┌───────────────────────┐ │
│ │ item │ │ item │ │
│ │ Q: Question 1? │ │ Q: Question 2? │ │
│ │ │ │ │ │
│ │ A: Answer text for │ │ A: Answer text for │ │
│ │ question one... │ │ question two... │ │
│ └───────────────────────┘ └───────────────────────┘ │
│ ┌───────────────────────┐ ┌───────────────────────┐ │
│ │ item │ │ item │ │
│ │ Q: Question 3? │ │ Q: Question 4? │ │
│ │ │ │ │ │
│ │ A: Answer text... │ │ A: Answer text... │ │
│ └───────────────────────┘ └───────────────────────┘ │
└─────────────────────────────────────────────────────┘Usage
<FAQ
title="Frequently Asked Questions"
subtitle="Everything you need to know"
items={[
{
question: 'What is your refund policy?',
answer: 'We offer a 30-day money-back guarantee on all purchases.',
},
{
question: 'How do I get started?',
answer: 'Sign up for a free account and follow our getting started guide.',
},
{
question: 'Do you offer enterprise plans?',
answer: 'Yes! Contact our sales team for custom enterprise pricing.',
},
{
question: 'What payment methods do you accept?',
answer: 'We accept all major credit cards, PayPal, and wire transfers.',
},
]}
/>With Categories
<FAQ
title="Help Center"
showCategories
categories={['Billing', 'Technical', 'Account']}
items={[
{ question: 'How do I upgrade?', answer: '...', category: 'Billing' },
{ question: 'API rate limits?', answer: '...', category: 'Technical' },
{ question: 'Reset password?', answer: '...', category: 'Account' },
]}
/>Searchable
<FAQ
searchable
searchPlaceholder="Type to search FAQs..."
items={faqItems}
/>Layout Variants
<FAQ layout="accordion" /> // Expandable accordion
<FAQ layout="grid" columns={2} /> // Grid of cards
<FAQ layout="two-column" /> // Q&A side by side