FAQ Section
Accordion based FAQ with two column or centered layout, category tabs and a FAQPage JSON-LD helper.
pnpm dlx @glinui/cli@latest add faq-sectionFAQ
Questions, answered
Everything you need before you start.
Installation
pnpm dlx @glinui/cli@latest add faq-sectionPrefer the package?
Usage
Composes our Accordion, so keyboard and ARIA come from it.
`faqJsonLd(items)` returns an escaped JSON string for a script tag, or pass `jsonLd` to render it. Rich answers need `answerText` to appear in the JSON-LD.
Variants
Centered, and with category tabs.
Centered
With category tabs
<FaqSection items={items} layout="centered" /><FaqSection items={items} categories />States
Single open item by default, `multiple` opens several.
Centered
With category tabs
<FaqSection items={items} multiple />In a layout
Between social proof and the closing CTA.
Trusted by builders
Placeholder quote: the setup took an afternoon and the team stopped asking where the buttons came from.
Placeholder quote: accessible by default, which saved us a long audit.
Placeholder quote: the tokens made dark mode a one line change.
FAQ
Start today
<FaqSection items={items} layout="centered" />Accessibility
- Section labelled by its heading.
- Accordion triggers are buttons with aria-expanded.
- Category tabs use the tablist pattern with arrow key navigation.
Keyboard Interactions
| Key | Action |
|---|---|
| Enter / Space | Toggle the focused question |
| Arrow keys | Move between category tabs |
Reduced Motion
The accordion height animation is removed under reduced motion by the Accordion itself.
Affected properties
accordion open and closeAPI Reference
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
items | FaqItem[] | Yes | - | question, answer, optional answerText and category. |
layout | FaqSectionLayout | No | two-column | Title left and accordion right, or stacked. |
variant | AccordionVariant | No | ambient | Accordion look. |
categories | boolean | No | false | Show category tabs when items carry two or more categories. |
multiple | boolean | No | false | Allow several items open. |
jsonLd | boolean | No | false | Render a FAQPage script. |
aside | React.ReactNode | No | - | Slot such as a contact card. |
description | React.ReactNode | No | - | Auto-generated from TypeScript source. |
eyebrow | React.ReactNode | No | - | Auto-generated from TypeScript source. |
title | React.ReactNode | No | - | Auto-generated from TypeScript source. |
Source
Import directly from the package or browse the source on GitHub. Click any file to view it.
Import
import { FAQSection } from "@glinui/ui"Source Files
Dependencies
@glinui/uiGenerated API Snapshot
Beta
Generated API Snapshot
BetaAuto-extracted from TypeScript source in packages/ui/src/components/faq-section.tsx. This section is in beta and may lag behind hand-curated docs. Regenerate with pnpm --filter @glinui/docs api:generate.
Generated: 2026-10-08T01:41:21.546Z · Full index: /docs/api-metadata
Primary Props Type
FaqSectionProps
FaqSectionProps
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
aside | React.ReactNode | No | - | Extra content under the title in the two-column layout, such as a contact card. |
categories | boolean | No | false | Group items into category tabs (items need a `category`). |
description | React.ReactNode | No | - | - |
eyebrow | React.ReactNode | No | - | - |
items | FaqItem[] | Yes | - | - |
jsonLd | boolean | No | false | Render a FAQPage JSON-LD script. |
layout | FaqSectionLayout | No | "two-column" | - |
multiple | boolean | No | false | Allow several items open at once. |
title | React.ReactNode | No | - | - |
variant | AccordionVariant | No | - | Accordion look. Omit to follow the ambient style. |