How do I install an Iconiq component?

Install components with shadcn using commands like npx shadcn@latest add @iconiq/b-button, or use a direct registry URL from https://iconiqui.com/r/b-button.json.

Is Iconiq free to use?

Yes. Iconiq is open source and free to use for personal and commercial projects.

What technologies power Iconiq?

Iconiq components are written in TypeScript and React, with motion powered by Motion and registry delivery built around shadcn/ui conventions.

FAQ Pro

Searchable FAQ accordion with rounded cards, smooth panel motion, automatic expansion for matches, and inline highlight styling for the active query.

Iconiq is an open-source library of motion-powered React components built around the shadcn registry workflow. Browse polished UI primitives, install them as local files, and adapt them inside your own codebase.

Installation

npx shadcn@latest add @iconiq/faq-pro

Props

FaqPro

4 props

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

DefaultSearch FAQs...

Placeholder copy for the search field.

defaultOpenFirstboolean

Defaultfalse

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

classNamestring

Optional class names applied to the root container.

Notes

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.