Design KitComponentv0.3.0

FAQAccordion

Accordion FAQ block with good scanability.

When to use

Use to reduce support load and handle objections near CTAs/pricing.

Import

Import
tsx
import FAQAccordion from "@/components/FAQAccordion";

Example

Example
tsx
import FAQAccordion from "@/components/FAQAccordion";

<FAQAccordion items={[{ question: "Question?", answer: <p>Answer.</p>, open: true }]} />

Live preview

People also ask

Does it support rich answers?

Yes, React nodes.

Where to place it?

Near CTAs and pricing.

Live preview

People also ask

Where do I import FAQAccordion from?

Use: import FAQAccordion from "@/components/FAQAccordion";

How do I keep it multi-domain safe?

Don’t hardcode domains in metadata/JSON-LD. Use getSiteUrl() + toAbsoluteUrl().

Design kit

Turn this into a sellable export

If you want the “packaged kit” (versioning, license, exportable docs and components), we can scope the release pipeline.