FAQ Pro

Searchable FAQ with auto-expanded matches and query highlights.

Installation

npx shadcn@latest add @iconiq/faq-pro

Searchable FAQ accordion with rounded cards, animated panels, query highlighting, and automatic expansion for filtered results.

itemsFaqProItem[]

Required

Array of `{ id, question, answer }` entries. Each id must be unique within the list.

searchPlaceholderstring

Default Search FAQs...

Placeholder copy for the search field.

defaultOpenFirstboolean

Default false

Opens the first item when there is no active search query.

classNamestring

Optional class names applied to the root container.

Search filters by question and answer text. The first matching row opens automatically while you type.

Only one FAQ panel can be open at a time. Clicking another item closes the previous one.

Matched substrings render inside a highlight mark in both the question and answer.

When the query is cleared, the list returns to the default open state controlled by defaultOpenFirst.

Install the exact registry entry shown on the right when you want the component file and its declared runtime dependencies together.

Dependencies: @base-ui/react/accordion, motion, lucide-react.

This page documents the Base UI install only. FAQ Pro uses Base UI Accordion for single-open FAQ rows.

The generated registry file is /r/faq-pro.json.