asafefe.dev

FAQ Accordion

New

Questions that open with a smooth height change while the plus turns into a minus. Single or multiple open.

motionutils@soultel/use-reduced-motion-safe

Yes. Hobby is free forever for up to three projects. No card needed to sign up.

Installation

$ pnpm dlx shadcn@latest add @soultel/faq-accordion

No namespace set up? npx shadcn@latest add https://asafefe.dev/r/faq-accordion.json works too.

Manual installation
  1. 1. Install the dependencies.
    terminal1 lines
    npm install motion
  2. 2. Copy the source from the Code tab into components/faq-accordion.tsx.

Usage

example.tsx13 lines
import { FaqAccordion } from "@/components/faq-accordion"

export function Faq() {
  return (
    <FaqAccordion
      defaultValue={["0"]}
      items={[
        { question: "Can I cancel anytime?", answer: "Yes. Your plan stays active until the end of the period." },
        { question: "Do you offer refunds?", answer: "Within 14 days of any charge, no questions asked." },
      ]}
    />
  )
}

Props

PropTypeDefaultDescription
itemsFaqItem[]-question, answer (any node), and an optional id.
type"single" | "multiple""single"Whether opening one closes the others.
value / defaultValuestring[]-Controlled or initial open ids. Ids default to the index.
onValueChange(value: string[]) => void-Called when items open or close.