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.

Key Features:

• 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.

Rich Property Controls:

• items array: { question, answer, category? }.

• Toggles: showSearch, showCategories.

• Text & accent styling: accentColor, borderColor, backgroundColor, questionTextColor, answerTextColor.

• Layout tuning: accordionRadius, accordionPadding, gap.

  

Usage Guide:

• 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.

Who this component is best for:

• SaaS and product teams

• Marketing & landing page designers

• Agencies and freelancers

• No‑code & low‑code Framer users