FAQ Accordion Section: Free React + Tailwind Component

A complete FAQ section: the search box at the top filters live and highlights matched keywords, the selected pill behind the category tags flows between them on a spring, questions expand and collapse with a height animation while the arrow rotates in sync, and an empty state appears when the search finds nothing — ready to drop straight into a marketing page or a help center.

Bring this into your project

Run this command in your project folder. The CLI adds the source and dependencies; then follow the usage example below.

npx webberui@latest add faq-accordion-section.en

New project or installation trouble? Start here →

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

Headlinetitle

Subheadingsubtitle

Search placeholdersearchPlaceholder

Show category tagsshowCategories

Item expanded by defaultdefaultOpenIndex

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

Active edited usageDefault props

<FaqAccordionSection/>

    </div>
  );
}

The complete example includes the preview layout and data. Install the component first, then paste this file into your project.

Installation

npx webberui@latest add https://webberui.com/r/faq-accordion-section.en.json

Or, once registries are configured in components.json, install it as @webberui/faq-accordion-section.

Usage

import { FaqAccordionSection } from "@/components/ui/faq-accordion-section";

<FaqAccordionSection
  title="Frequently asked questions"
  subtitle="Can't find the answer? Get in touch with support"
  items={[
    {
      category: "Plans and billing",
      question: "Can I cancel my subscription at any time?",
      answer: "Yes — after cancelling you keep access until the end of the current period.",
    },
    {
      category: "Account",
      question: "What should I do if I forget my password?",
      answer: "Click \"Forgot password\" on the sign-in page and a reset link will be emailed to you.",
    },
  ]}
/>

Props

Prop	Type	Default	Description
`items`	`FaqItem[]`	—	FAQ item data; each has a `question`, an `answer`, and an optional `category`
`title`	`string`	`"Frequently asked questions"`	Main section title
`subtitle`	`string`	—	Subtitle text below the main title
`searchPlaceholder`	`string`	`"Search questions…"`	Placeholder text for the search box
`showCategories`	`boolean`	`true`	Whether to show the row of category tags (categories are collected automatically from items)
`allLabel`	`string`	`"All"`	Display text for the "All" category tag
`emptyText`	`string`	`"No matching questions — try a different keyword"`	Empty state text shown when the search finds nothing
`defaultOpenIndex`	`number`	`0`	Index of the item expanded by default (matching the original items order); `-1` collapses everything
`className`	`string`	—	Forwarded to the outermost `<section>` container

Accessibility

Each question button carries aria-expanded and aria-controls, and the answer panel is associated through role="region" plus aria-labelledby, so assistive technology announces the expanded state correctly
The category tags are native <button>s that mark their selected state with aria-pressed and are fully keyboard operable
The number of search results is announced immediately through an aria-live="polite" region, falling back to the empty state text when there are no results
When the user has "reduce motion" enabled at the system level, the expand/collapse, the category pill, and the list enter/exit animations all become instant switches

FAQ Accordion Section