FAQ sectionPro
Searchable FAQ with category filters, an accordion and a contact fallback.
What's inside
- Instant search
- Category filters
- Accordion
- Contact fallback
When to use
- Pricing pages and help sections with 6+ common questions.
When not to use
- Long documentation: use the help center.
Installation
Usage
Import it from @/components/blocks/faq-section after installing. It ships with sample data, so it renders straight away; swap in your own data when you're ready.
example.tsx
import { FaqSection } from "@/components/blocks/faq-section";
<FaqSection faqs={[{ category: "Billing", q: "Can I cancel?", a: "Any time, from Billing." }]} contact={{ label: "Email us", href: "mailto:help@acme.com" }} />Built fromAccordion
API reference
FaqSection
Search plus category chips over an accordion. Also the default export.
| Prop | Type | Default | Description |
|---|---|---|---|
| title / description | string | – | Heading. |
| faqs | { q; a; category }[] | – | Questions; categories become filter chips. |
| contact | { label; href } | – | Fallback action. |
Keyboard interactions
| Keys | Action |
|---|---|
| Tab | Move through search, categories and questions |
| EnterorSpace | Open a question |
Accessibility
- Categories are a radio group; results update in a polite live region.
- Accordion headers use aria-expanded.
Motion
- The category pill slides; results cross-fade on filter; answers expand by height.
Responsive behavior
- Single column; chips wrap.
Performance
- Filtering is local and instant.
Notes for AI
- Keep answers to 1–3 sentences.
This page as Markdown, for assistants and coding agents:
/blocks/faq-section/markdownThe full library index for assistants is at /llms.txt.
Lode222 doc pagesllms.txt