A light FAQ with a sticky left column holding the title and a support card with online status, and numbered questions on the right that open with a smooth height animation.
FAQ
Everything about booking, payments and calendars. If something is missing, our support team is one message away.
Talk to a real person
Our support team in Lisbon and Austin replies in about two hours, seven days a week.
npx shadcn@latest add https://hyperblur.dev/r/faq-two-column.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/faq-two-column.tsx.
import { FaqTwoColumn } from "@/components/hyperblur/faq-two-column"
<FaqTwoColumn items={[{ question: "Can clients book without an account?", answer: "Yes, with just a name and email." }]} />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "FAQ" | Small tinted label above the title. |
| title | string | "Questions, answered" | Section heading. |
| subtitle | string | sample text | Supporting text under the heading. |
| items | { question: string; answer: ReactNode }[] | 6 sample questions | Numbered questions. One is open at a time. Arrow keys move between them. |
| support | { title: string; text: string; people?: string[]; status?: string } | null | sample support card | Card under the subtitle. People render as initials, status gets a live dot. |
| contact | { label: string; href: string } | null | { label: "Contact support", href: "#contact" } | Primary button in the support card. |
| secondary | { label: string; href: string } | null | { label: "Help center", href: "#help" } | Outline button next to the primary one. |
| accent | string | "#4f46e5" | Accent for numbers, the open marker and button hover. |
| defaultOpen | number | 0 | Index of the question open on first render. Use -1 for all closed. |
| onOpenChange | (index: number) => void | Called with the newly open index, or -1 when everything closes. |