FaqAccordionSearch is designed for product pages, help centers, SaaS docs, and marketing sites where users need fast answers, not long walls of text. Instead of a static FAQ, it gives you an interactive question list with:
Accordion‑style questions that expand and collapse with smooth, minimal motion.
A real‑time search bar that instantly filters questions by text as the user types.
Optional category tabs/pills so visitors can jump between topics like “Billing”, “Product”, “Account”, etc.
Full control over visuals: colors, typography, radius, padding, spacing, and light/dark appearance.
Click or key‑press to expand/collapse each question.
Smooth height/opacity animation powered by Framer Motion.
Optional search input that filters questions as you type.
Customizable placeholder text.
Optional category bar to switch between topics.
Focus states on interactive elements.
Clean, minimal visual style with sensible defaults.
items array: { question, answer, category? }.
Toggles: showSearch, showCategories.
Text & accent styling: accentColor, borderColor, backgroundColor, questionTextColor, answerTextColor.
Layout tuning: accordionRadius, accordionPadding, gap.
Copy and drop the component into your canvas
In the property controls, open the items array.
Add one object per question:
question: string
answer: string
category (optional): e.g., "General", "Billing", "Account".
Turn on showSearch to display the search bar. (optional)
Adjust accentColor, Tune backgroundColor, Set questionTextColor.
Use accordionRadius, accordionPadding, and gap to match your layout system.
SaaS and product teams
Marketing & landing page designers
Agencies and freelancers
No‑code & low‑code Framer users
Design by Saqlain
