Accordion

Installation

npx shadcn@latest add @fujin/accordion

Usage

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion"

<Accordion defaultValue={["shipping"]}>
  <AccordionItem value="shipping">
    <AccordionTrigger>How long does shipping take?</AccordionTrigger>
    <AccordionContent>2-5 business days.</AccordionContent>
  </AccordionItem>
</Accordion>

Multiple open items

<Accordion multiple defaultValue={["shipping", "returns"]}>
  ...
</Accordion>

Find in page

hiddenUntilFound keeps closed panels in the DOM with hidden="until-found", so the browser's find-in-page (Ctrl/Cmd+F) can search them and opens the panel that matches. Useful for FAQs and docs.

<Accordion hiddenUntilFound>...</Accordion>

What's different from shadcn/ui

• value and defaultValue are always arrays, even for a single-open accordion. There is no type="single" | "multiple" - use multiple.
• There is no collapsible prop: an open item can always be closed again.
• Each trigger is wrapped in an <h3> (Base UI's Accordion.Header). Pass render={<h2 />} to the header in the source if your page outline needs a different level.

API Reference

Every other prop is forwarded to the Base UI Accordion.