---
title: "FAQ Accordion Search — Framer component · Best of Framer"
description: "$5.00 · Framer component · by Russet Supply · Accordions. Searchable FAQ accordion with categories"
canonical: "https://framer.elliotli.dev/component/faq-accordion-search"
---

[Home](/)/[Components](/components)/[Accordions](/components/category/accordions)/FAQ Accordion Search

# FAQ Accordion Search

Searchable FAQ accordion

[View on Framer](https://framer.com/marketplace/components/faq-accordion-search/?via=elliot-li)

![FAQ Accordion Search preview image 1](https://framer.elliotli.dev/og/component/faq-accordion-search/6adc981e2b394af4/1600x1200.jpg)

## Summary

Searchable FAQ accordion with categories

## Description

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.
    
    ![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-ou4u2dhy-ro1naNBjVyNZILHRtgkZB2CeQiVPfY)

### 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
    

## Rank history [How rankings work →](/terms#rankings)

-   All · #5086

## Details

- **Author**: Russet Supply
- **Price**: $5.00
- **Published**: 2026-05-29
- **Updated**: 2026-11-04
- **Added**: 2026-05-17
- **Categories**: Accordions

## More like this

-   [Fold Rows](/component/fold-rows) — H SHIFT WORKS · Free — Accordion for FAQs and services
-   [FaqX Faq Accordion](/component/faqx-faq-accordion) — Themomarket · $8 — Accordion FAQ Section
-   [FAQ - Minimal](/component/faq-minimal) — VectorFlow Studio · $3 — Interactive dark mode FAQ stack
-   [Features Accordian](/component/features-accordian) — Russet Supply · $5 — Smooth showcase pills