FAQ Split
FAQs
Source and install need .
pnpm dlx shadcn@latest add @assembli/faq-searchFAQ Search
Help-centre FAQ: a large search field filters answers live and highlights the matched words, a 2×3 grid of topic cards shows how many answers match in each, and results open as a divided accordion. Every answer ends with a thumbs up or down that confirms inline, and an empty search offers to contact support.
Props
Other props pass through to the root element.
eyebrow
React.ReactNode
Default
"Help centre"title
React.ReactNode
Default
"How can we help?"description
React.ReactNode
topics*
FaqSearchTopic[]
items*
FaqSearchItem[]
suggestions
string[]
Default
[]Quick searches offered under the field.
placeholder
string
Default
"Search answers…"supportHref
string
Default
"#"Where "Contact support" goes.
{query}is replaced with the search text.popular
string[]
Ids shown as "Popular questions" before anyone searches or picks a topic. Defaults to every answer.
defaultOpen
string[]
Default
[]Answers open on first render.
onFeedback
(id: string, vote: FaqSearchVote) => void
Called when someone rates an answer.
| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | React.ReactNode | "Help centre" | |
| title | React.ReactNode | "How can we help?" | |
| description | React.ReactNode | – | |
| topics* | FaqSearchTopic[] | – | |
| items* | FaqSearchItem[] | – | |
| suggestions | string[] | [] | Quick searches offered under the field. |
| placeholder | string | "Search answers…" | |
| supportHref | string | "#" | Where "Contact support" goes. {query} is replaced with the search text. |
| popular | string[] | – | Ids shown as "Popular questions" before anyone searches or picks a topic. Defaults to every answer. |
| defaultOpen | string[] | [] | Answers open on first render. |
| onFeedback | (id: string, vote: FaqSearchVote) => void | – | Called when someone rates an answer. |
