Two-column FAQ: heading and contact link on the left, an animated one-at-a-time accordion on the right.
Everything you need to know before getting started. Can not find the answer you are after? Our team is happy to help.
Contact support
npx shadcn@latest add https://hyperblur.dev/r/faq-section.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/faq-section.tsx.
import { FaqSection } from "@/components/hyperblur/faq-section"
<FaqSection items={[{ question: "Is there a free plan?", answer: "Yes, forever." }]} contact={{ label: "Ask us", href: "/contact" }} />| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | "Frequently asked questions" | Section heading. |
| subtitle | string | sample text | Supporting text under the heading. |
| items | { question: string; answer: ReactNode }[] | 6 sample questions | Questions and answers. Only one is open at a time. |
| contact | { label: string; href: string } | { label: "Contact support", href: "#contact" } | Pill link under the subtitle. |
| accent | string | "#2f7bff" | Accent color for hover, focus ring and the open chevron. |
| defaultOpen | number | 0 | Index of the question open on first render. Use -1 for all closed. |