20% offProwith

Buy now

Marketing section

FAQ

shadcn addfaq
detentui.com/faq

Wire it up

All optional. With none, it plays exactly as it does here and hands over to whoever touches it.

Usage
<FAQ
  questions={questions}
  product={product}
  multiple={multiple}
  onAsk={(query) => {}}
  onContact={() => {}}
  onFeedback={(id, helpful) => {}}
/>

Your data

questions

The questions. Topics come from them, in the order they first appear.

{ id, topic, q, a }[]
Default—
product

The product’s name, wherever the default questions name it.

string
Default'Detent'
multiple

Let more than one answer be open at once.

boolean
Defaultfalse
eyebrow

The small accent line above the heading.

string
Default'Questions'
title

The heading, set in two tones.

[string, string]
Default—
subline

One sentence under the heading.

string
Default—

What it tells you

onAsk

Called with what a person searched for when nothing answers it.

(query: string) => void
Default—
onContact

Called when a person asks to talk to someone.

() => void
Default—
onFeedback

Called when a person says whether an answer helped. The script doesn’t call it.

(id: string, helpful: boolean) => void
Default—

Every block also takes accent, the one colour everything in it derives from; autoplay, which plays the demo until someone touches it; and className.