FAQ as a conversation: questions become visitor bubbles and the answers type out with a cursor. A numbered question list sits beside the thread, chips replace it on narrow containers.
~/help --faq
The six questions we get every week, answered by the people who built Ledgerly. Tap one to see the reply.
npx shadcn@latest add https://hyperblur.dev/r/faq-chat-thread.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/faq-chat-thread.tsx.
import { FaqChatThread } from "@/components/hyperblur/faq-chat-thread"
<FaqChatThread onAsk={(item) => console.log(item.question)} />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "~/help --faq" | Monospaced label above the title. |
| title | string | "Ask away. We have heard these before." | Section heading. |
| subtitle | string | "The six questions we get every week..." | Supporting text. |
| items | { question: string; answer: string }[] | 6 questions | Questions and answers. The first is answered on load and the second types in. |
| botName | string | "Ledgerly help" | Name in the thread header. |
| speed | number | 1 | Typing speed multiplier. |
| contact | { label: string; href: string } | { label: "Still stuck? Message the team", href: "#" } | Link under the question list. |
| onAsk | (item: { question: string; answer: string }, index: number) => void | Called when a question is asked. | |
| accent | string | "#10b981" | Color of visitor bubbles, the cursor and answered markers. |
| className | string | Extra classes on the root element. | |
| style | React.CSSProperties | Inline styles merged onto the root element. |