FAQ Accordion Section

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.

Loading preview…

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

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

<FaqAccordionSection />

Installation

npx shadcn@latest add https://webberui.com/r/faq-accordion-section.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