Sections

FAQ Section

A spring-physics FAQ accordion — rows pop in with stagger, panels unfold with height springs, and the plus badge twists into a close mark on open.

All components

Frequently asked questions

Everything you need to know before you start building.

A growing library of production-ready motion components built with React, Tailwind, and Motion. Copy the source into your project and own it completely — no runtime lock-in, no black boxes.

Installation

Coming soon. Components will be available via the registry once checkout goes live.

Usage

<FaqSection />

// or with your own questions:
<FaqSection
  title="Questions, answered"
  subtitle="Can't find what you need? Reach out to support."
  allowMultiple
  items={[
    { id: "refunds", question: "Do you offer refunds?", answer: "Yes — full refund within 14 days, no questions asked." },
    { id: "support", question: "How fast is support?", answer: "We reply within one business day on every plan." },
  ]}
/>

Props

Prop	Type	Default	Description
items	FaqItem[]	—	Question rows: id, question, answer. Defaults to a 5-item demo set.
title	string	"Frequently asked questions"	Section heading.
subtitle	string	—	Supporting line under the heading. Pass an empty string to hide.
defaultOpenId	string \| null	null	Id of the item expanded on mount.
allowMultiple	boolean	false	Lets several panels stay open at once instead of accordion behavior.
className	string	—	Tailwind classes on the section.

Use cases

Landing page FAQs
The closing objection-handler section before the final CTA.
Pricing page clarifications
Billing, refund, and licensing questions next to the plan grid.
Help center highlights
Surface the top questions before pointing users at full docs.
Onboarding reassurance
Answer setup and data-safety questions inside a signup flow.