MarketingFaq

FAQ section composing the Accordion primitive: an optional heading above a stack of question/answer pairs. Defaults to 'single' (one open at a time, collapsible); pass type='multiple' for parallel-open. Client Component.

Installation

pnpm

pnpm dlx @hex-core/cli add marketing-faq

Usage

tsx

import { MarketingFaq } from "@/components/ui/marketing-faq"

FAQ with single-open

Heading block above 3 collapsible Q/A pairs.

tsx

import { MarketingFaq } from "@hex-core/components";

<MarketingFaq
  title="Frequently asked questions"
  description="Can't find what you need? Email support."
  items={[
    { question: "Can I switch plans anytime?", answer: "Yes — prorated to the day." },
    { question: "Do you offer a free trial?", answer: "14 days, no card required." },
    { question: "Is my data encrypted?", answer: "At rest and in transit." },
  ]}
/>

Variant values

typeOpen/close behavior.

Value	Description
`single`default	One item open at a time, collapsible.
`multiple`	Multiple items open in parallel.

API Reference

Prop	Type	Default	Description
`items`required	`object`	—	ReadonlyArray<{ question: ReactNode; answer: ReactNode }>. Q/A pairs in display order. Item ids derive from 1-based index so defaultValue stays stable.
`eyebrow`	`ReactNode`	—	Section eyebrow above the title.
`title`	`ReactNode`	—	Section heading.
`description`	`ReactNode`	—	Section subcopy below the heading.
`type`	`enum`	single	'single' (one open at a time, collapsible) or 'multiple' (parallel-open).
`defaultValue`	`string`	—	Item id to start open (single type, e.g. 'item-1') or array of ids (multiple).
`className`	`string`	—	Additional classes applied to the root <section>.

AI Guidance

When to use

Use to answer common pre-conversion questions on landing/pricing pages. 5–8 items is the sweet spot; more becomes a docs page.

When not to use

Don't use for support docs (use a full docs site) or content discovery (use marketing-content). Don't put critical info exclusively here — assume users scan the first 2–3.

Common mistakes

Writing answers as 1–2 word fragments — answers should be a complete sentence so they read in isolation.
Using type='multiple' with 20+ items so the page becomes unscannable.
Hard-coding defaultValue to 'item-3' then reordering items so the wrong one auto-opens.

Accessibility

Triggers are buttons with aria-expanded and aria-controls (inherited from Accordion / Radix). Keyboard: Tab to focus, Enter/Space to toggle, Up/Down to navigate items. Section title is <h2>, questions render as the button labels.

Related components

Token budget: 980

Verified against @hex-core/components@1.14.0

Edit this page on GitHub