[ [LC.06] Components ] FAQ Section

FAQ Section

> Accordion-style FAQ with expandable answers and category filtering.

Preview

[ [0x00] FAQ SECTION ]

[ [0x50] KNOWLEDGE_BASE ] FAQ

FREQUENTLY ASKED QUESTIONS

└─ [RESPONSE]: Auth, payments, email, database, and 100+ UI components.

1import { FAQSection } from "@/components/marketing/faq-section";
2
3export default function LandingPage() {
4  return (
5    <main>
6      <HeroSection />
7      <FeaturesSection />
8      <PricingSection />
9      <TestimonialsSection />
10      <FAQSection />
11      <Footer />
12    </main>
13  );
14}

Variants

[ [0x00] CATEGORY TABS ]

[ CATEGORIES ]

1const [activeCategory, setActiveCategory] = useState("general");
2const categories = ["GENERAL", "TECHNICAL", "PAYMENT", "LICENSE"];
3
4<div className="flex gap-2">
5  {categories.map((cat) => (
6    <button
7      key={cat}
8      onClick={() => setActiveCategory(cat.toLowerCase())}
9      className={cn(
10        "px-4 py-2 border",
11        activeCategory === cat.toLowerCase()
12          ? "bg-primary text-primary-foreground"
13          : "bg-card"
14      )}
15    >
16      {cat}
17    </button>
18  ))}
19</div>

[ [0x00] SINGLE FAQ ITEM ]

1<Accordion type="single" collapsible>
2  <AccordionItem value="item-1">
3    <AccordionTrigger>What payment methods?</AccordionTrigger>
4    <AccordionContent>
5      We accept all major credit cards via Stripe.
6    </AccordionContent>
7  </AccordionItem>
8</Accordion>

API Reference

[ [0x00] API REFERENCE ]

Prop	Type	Default	Description
faqs	`{ question: string; answer: string; category?: string }[]`	-	Array of FAQ items
showCategories	`boolean`	`true`	Show category filter tabs
defaultOpen	`number`	`undefined`	Index of initially open item

Accessibility

[ [0x58] A11Y ]

Accordion uses proper ARIA expanded states
Keyboard navigation with Enter/Space to toggle
Focus visible indicators on interactive elements
Screen readers announce open/closed states

Preview

[ [0x00] FAQ SECTION ]

[ [0x50] KNOWLEDGE_BASE ] FAQ

FREQUENTLY ASKED QUESTIONS

└─ [RESPONSE]: Auth, payments, email, database, and 100+ UI components.

1import { FAQSection } from "@/components/marketing/faq-section";
2
3export default function LandingPage() {
4  return (
5    <main>
6      <HeroSection />
7      <FeaturesSection />
8      <PricingSection />
9      <TestimonialsSection />
10      <FAQSection />
11      <Footer />
12    </main>
13  );
14}

Variants

[ [0x00] CATEGORY TABS ]

[ CATEGORIES ]

1const [activeCategory, setActiveCategory] = useState("general");
2const categories = ["GENERAL", "TECHNICAL", "PAYMENT", "LICENSE"];
3
4<div className="flex gap-2">
5  {categories.map((cat) => (
6    <button
7      key={cat}
8      onClick={() => setActiveCategory(cat.toLowerCase())}
9      className={cn(
10        "px-4 py-2 border",
11        activeCategory === cat.toLowerCase()
12          ? "bg-primary text-primary-foreground"
13          : "bg-card"
14      )}
15    >
16      {cat}
17    </button>
18  ))}
19</div>

[ [0x00] SINGLE FAQ ITEM ]

1<Accordion type="single" collapsible>
2  <AccordionItem value="item-1">
3    <AccordionTrigger>What payment methods?</AccordionTrigger>
4    <AccordionContent>
5      We accept all major credit cards via Stripe.
6    </AccordionContent>
7  </AccordionItem>
8</Accordion>

Prop

Type

Default

Description

faqs

{ question: string; answer: string; category?: string }[]

Array of FAQ items

showCategories

boolean

true

Show category filter tabs

defaultOpen

number

undefined

Index of initially open item