A light FAQ with topic cards in a vertical tab list (icon, count and description) and a panel that wipes in from the top when you switch, with numbered questions rising into place. Arrow keys move between topics.
Support
Pick a topic on the left. Each one keeps the questions our merchants ask most, updated every month by the support team.
Pick a theme, add three products and connect a payment method. The setup checklist on your dashboard walks through each step and usually takes about twenty minutes.
Upload a CSV or connect your old store and we import products, variants, images and inventory counts. Customer accounts can be imported too, with their consent.
No. Every shop starts on a free subdomain. When you are ready, connect a domain you own or buy one in Settings, Domains for 14 dollars a year.
npx shadcn@latest add https://hyperblur.dev/r/faq-category-deck.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/faq-category-deck.tsx.
import { FaqCategoryDeck } from "@/components/hyperblur/faq-category-deck"
<FaqCategoryDeck defaultValue="billing" onValueChange={(id) => console.log(id)} />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "Support" | Line above the title. |
| title | string | "Find the answer by topic." | Heading. |
| subtitle | string | Paragraph beside the heading. | |
| categories | { id: string; label: string; description: string; icon?: "rocket" | "card" | "shield" | "plug" | "people" | "box"; items: { question: string; answer: string }[] }[] | 4 categories | Topics and their questions. |
| value | string | Controlled category id. | |
| defaultValue | string | Category open on load when uncontrolled. Defaults to the first. | |
| onValueChange | (id: string) => void | Called when the topic changes. | |
| contact | { label: string; href: string } | { label: "Open a ticket", href: "#" } | Link at the bottom of the panel. |
| appearance | "light" | "dark" | "light" | White or dark palette. |
| accent | string | "#0f766e" | Selected card, icon and number color. |
| className | string | "" | Extra classes for the root element. |
| style | CSSProperties | Inline styles merged after the accent variables. |