Category tabs with a sliding pill switch between sets of question cards, which slide and fade in from the direction you moved. Arrow keys move between tabs.
Help center
Pick a topic to see the questions our customers ask most often.
npx shadcn@latest add https://hyperblur.dev/r/faq-categories.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/faq-categories.tsx.
import { FaqCategories } from "@/components/hyperblur/faq-categories"
<FaqCategories categories={[{ id: "billing", label: "Billing", items: [{ question: "When am I charged?", answer: "When the trial ends." }] }]} />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "Help center" | Uppercase label above the heading. |
| title | string | "Answers, sorted by what you need" | Section heading. |
| subtitle | string | sample text | Supporting line under the heading. |
| categories | { id: string; label: string; icon?: ReactNode; items: { question: string; answer: ReactNode }[] }[] | Billing, Security and Product | Tabs and their questions. Without an icon a built-in one is used. |
| value | string | Controlled active category id. Pair with onValueChange. | |
| defaultValue | string | first category id | Active category on first render when uncontrolled. |
| onValueChange | (id: string) => void | Called when a tab is chosen. | |
| contact | { label: string; href: string } | null | { label: "Chat with our team", href: "#chat" } | Pill link under the cards. Pass null to hide it. |
| accent | string | "#8b5cf6" | Accent for the sliding pill, card markers and hover borders. |