Faq
v1.0.16Updated 19 Oct 2026Frequently-asked-questions section built around accordions and Q&A columns. Copy-paste block; baked-in demo content (edit the JSX to customise).
Preview
Live · 13 stories▸Why this is recommendedfaqquestionsaccordionhelp+3
Faq — accordion single.
- ✓Landing pages
- ✓Pricing pages
- ✓Support / help pages
- Accordion, two-column, categorised and with-contact-CTA layouts
- Question + answer pairs
- items / categories are props that default to [] - an answer is a statement the reader attributes to whoever published the page, so we put none in a client mouth (condo69 fb_bc8045e2 / fb_f8fba1de)
- One configuration drives every shape: the flat blocks fall back to every category questions, flattened
- With no questions a block keeps its heading and shows labels.emptyItems - never an empty accordion, an empty column or an empty tab strip
- FaqWithContactCta renders NO chat or email button until chatHref / onChatClick and emailHref / onEmailClick are given
- Every block renders correctly for 0, 1 and many questions, and a search over an empty list shows the empty note rather than a no-results state
- ✕In-app help docs
Install
Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.
Usage
Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.
Props
classNameOptional wrapper class override
—labelsOverride every built-in display string across the FAQ family (eyebrows, headings, subcopy, search and category chrome, contact CTA, aria-labels) for i18n or white-labelling. Merged over DEFAULT_FAQ_LABELS.
—itemsThe questions these blocks answer, in reading order: [{ q, a }]. Defaults to the flattened `categories`, and to [] when there are none - we have no business publishing an answer in a client name. With none, a block shows labels.emptyItems. MCP feedback fb_bc8045e2 / fb_f8fba1de.
—categoriesThe grouped questions used by FaqWithCategories and FaqCategoryTabsWide: [{ id, label, items }]. Defaults to [] - no categories means no pill row and no tab strip, rather than an empty one. The flat blocks fall back to these, flattened.
—chatHrefWhere the FaqWithContactCta chat button goes - a LINE OA link, a help centre, a tel:. Until this (or onChatClick) is given the button renders NOTHING, the rule banner.tsx ctaHref records.
—onChatClickWhat the FaqWithContactCta chat button does. Safe to combine with chatHref (it fires before navigation); on its own it makes the button a real type=button. Receives the click event so a routed host can preventDefault (fb_bf7dc63a).
—emailHrefWhere the FaqWithContactCta email button goes, e.g. mailto:support@example.com. Same contract as chatHref: no destination and no handler means no button.
—onEmailClickWhat the FaqWithContactCta email button does. See onChatClick.
—linkComponentThe host app link component for every anchor this family renders (the contact CTAs). Defaults to a plain anchor, which in a routed app reloads the whole document (fb_bf7dc63a).
—