FAQ
.mdFAQ section with a heading, a spring accordion of questions and a "still have questions" contact card whose avatar stack pops in.
faqaccordionquestionssupportcontact
Installation
$npx shadcn@latest add @geturui/faq-section
Also installs: Bouncy Accordion, Button
Usage
usage.tsx
1import { FaqSection } from "@/components/blocks/faq-section";
2
3export default function Faq() {
4 return (
5 <FaqSection
6 items={[
7 { q: "Can I cancel any time?", a: "Yes. Your plan stays active until the end of the billing period." },
8 { q: "Do you offer refunds?", a: "Within 14 days, no questions asked." },
9 ]}
10 contact={{
11 title: "Still have questions?",
12 description: "Our team replies within a day.",
13 actionLabel: "Contact support",
14 href: "mailto:[email protected]",
15 team: ["Lena Park", "Omar Diaz"],
16 }}
17 />
18 );
19}
Props
| Prop | Type | Default | Description |
|---|---|---|---|
items | { q: ReactNode; a: ReactNode; icon?: ReactNode }[] | — | Questions and answers. |
defaultOpen | number | 0 | Index open on mount; -1 for none. |
contact | FaqContact | null | — | { title, description, actionLabel, href?, onAction?, team?, responseTime? }. null hides the card. |
layout | "split" | "stacked" | "split" | Heading and contact beside the list on wide containers, or everything centred. |
eyebrow / heading / subheading | string | — | Section copy. |
Accessibility
- Accordion triggers are buttons with aria-expanded and aria-controls; panels are labelled regions.
- The avatar stack is decorative; the contact action is a real link or button.