FAQ Accordion

Blocks & Slices

An FAQ section whose question rows spring-expand to reveal answers — the panel height morphs while content fades and lifts, and a plus icon rotates into an ×. Single mode collapses siblings; multiple lets several stay open. Every row is a real button with aria-expanded/controls, answers are labelled regions, and Up/Down/Home/End rove between questions. Under reduced-motion panels open and close instantly.

Inspired by Cult Pro — FAQ sections (pattern) — independently built, not affiliated. Attribution policy

Yes — the source copies into your project. No dependency, no lock-in.

Installation

npx shadcn@latest add https://parable-three.vercel.app/r/faq-accordion.json

Runs the shadcn CLI — the component source is copied intocomponents/parable/faq-accordion.tsx. You own it from there.

Usage

The exact code rendering the preview above.

<div className="w-full max-w-md px-4">
    <FaqAccordion
      defaultOpenIndex={0}
      items={[
        { question: "Do I own the code?", answer: "Yes — the source copies into your project. No dependency, no lock-in." },
        { question: "Is it really free?", answer: "Every component and template, MIT-licensed. No paid tier." },
        { question: "How do I install?", answer: "One shadcn CLI command per component." },
      ]}
    />
  </div>

Props

FaqAccordionProps extends Omit<React.HTMLAttributes<HTMLElement>, "title">

Prop	Type	Default	Description
items*	FaqItem[]	—	The question/answer pairs, rendered top to bottom.
title	React.ReactNode	—	Optional section heading rendered as an `<h2>` above the list.
type	"single" \| "multiple"	"single"	`"single"` (default) keeps at most one row open — opening one closes the rest. `"multiple"` lets any number stay open at once.
defaultOpenIndex	number	—	Index of the row open on first paint. Out-of-range values open nothing.
accent	string	"#8b5cf6"	Accent for the toggle icon and focus ring. Mirrors the site `--pb-violet` token.

npm dependencies

motion