An accordion where every question has a topic icon that draws itself and lights up when opened, with a search field (press slash to focus, arrow keys to move, Enter to open), match highlighting, a result count and topic chips.
Help center
Search the most common questions or filter by topic. Still stuck? A real person replies in under two hours.
Workspaces are hosted in Frankfurt or Virginia, your choice at signup. Data is encrypted at rest with AES-256 and in transit with TLS 1.3, and keys rotate every 90 days.
npx shadcn@latest add https://hyperblur.dev/r/faq-topic-icons.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/faq-topic-icons.tsx.
import { FaqTopicIcons } from "@/components/hyperblur/faq-topic-icons"
<FaqTopicIcons onItemToggle={(i, open) => console.log(i, open)} />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "Help center" | Line above the title. |
| title | string | "Questions, answered." | Heading. |
| subtitle | string | Paragraph under the heading. | |
| items | { question: string; answer: string; topic: "billing" | "security" | "team" | "data" | "integrations" | "account" }[] | 8 items | Questions. The topic picks the icon and the filter chip. |
| defaultOpen | number | null | 1 | Index of the question open on load. |
| placeholder | string | "Search questions" | Search placeholder. |
| contact | { label: string; href: string } | { label: "Contact support", href: "#" } | Support link in the footer and the empty state. |
| onItemToggle | (index: number, open: boolean) => void | Called when a question opens or closes. | |
| accent | string | "#2f7bff" | Icon, focus and highlight color. |
| className | string | "" | Extra classes for the root element. |
| style | CSSProperties | Inline styles merged after the accent variables. |