Faq.tsx
A frequently asked questions component with collapsible accordion items configured via locale file.
The Faq component displays frequently asked questions in an accessible accordion format. Content is managed through the locale file for easy updates without code changes.
Usage
Basic Implementation
import { Faq } from '@/components/Faq';
export default function HomePage() {
return (
<main>
<Faq />
</main>
);
}Locale Configuration
Configure FAQ items in locales/en.json:
{
"homePage": {
"faqSection": {
"title": {
"firstLine": "Frequently asked questions"
},
"description": "Answer common questions about your product.\nHelp customers make informed decisions.",
"faq": [
{
"title": "Common question 1 your customers ask?",
"description": "Provide a clear, helpful answer that addresses the question directly and provides value to the reader."
},
{
"title": "Common question 2 your customers ask?",
"description": "Provide a clear, helpful answer that addresses the question directly and provides value to the reader."
},
]
}
}
}Features
- Accordion UI: Collapsible questions with smooth animations
- Single Expansion: Only one question open at a time
- Locale-Driven: All content managed in locale file
- Accessible: Built with Radix UI for keyboard navigation and screen readers
- Responsive Design: Adapts to all screen sizes
- Centered Layout: Max-width container for optimal readability
Implementation Details
Accordion Configuration
The component uses Radix UI Accordion with these settings:
<Accordion type="single" collapsible className="w-full">
{/* FAQ items */}
</Accordion>type="single"- Only one item can be open at a timecollapsible- Allows closing the currently open item
FAQ Item Structure
Each FAQ item consists of:
<AccordionItem value={question.title}>
<AccordionTrigger>{question.title}</AccordionTrigger>
<AccordionContent className="flex flex-col gap-4 text-balance">
<p className="text-neutral-foreground">{question.description}</p>
</AccordionContent>
</AccordionItem>value- Unique identifier for each item (uses title)AccordionTrigger- Clickable question headerAccordionContent- Expandable answer content
Customization
Multiple Open Items
Allow multiple questions to be open simultaneously:
<Accordion type="multiple" className="w-full">
{faqLocale?.faq?.map((question, i) => (
<AccordionItem key={i} value={question.title}>
{/* content */}
</AccordionItem>
))}
</Accordion>Custom Width
Adjust the maximum width:
<div className="max-w-4xl w-full">
<Accordion type="single" collapsible className="w-full">
{/* FAQ items */}
</Accordion>
</div>Adding Links
Include links in FAQ answers:
{
"faq": [
{
"title": "Where can I find documentation?",
"description": "Visit our documentation at /docs for detailed guides and API references."
}
]
}Styling
The component uses Tailwind CSS with custom design tokens:
max-w-3xl- Maximum width for readabilitytext-balance- Balanced text wrappingtext-neutral-foreground- Secondary text colorgap-4- Spacing between content elements
Accessibility
The Accordion component provides:
- Keyboard Navigation: Arrow keys to navigate between items
- Screen Reader Support: Proper ARIA attributes
- Focus Management: Clear focus indicators
- Semantic HTML: Uses proper heading hierarchy
Adding New Questions
To add new FAQ items:
- Open
locales/en.json - Add new object to the
faqarray:
{
"faq": [
{
"title": "Your new question?",
"description": "Your detailed answer here."
}
]
}- Save the file - no code changes needed!
Layout Structure
The component uses the Section and SectionHeader components:
<Section>
<SectionHeader title={faqLocale?.title}>
{faqLocale?.description}
</SectionHeader>
<div className="max-w-3xl w-full">
<Accordion>{/* FAQ items */}</Accordion>
</div>
</Section>This provides consistent spacing and alignment with other sections.
Related
- Accordion.tsx - Accordion UI component
- Section.tsx - Section wrapper
- SectionHeader.tsx - Header component
- Localization - Managing locale files
How is this guide ?
Last updated on