Accordion

Vertically stacked expandable sections.

Installation

npm install @aspyn-io/kit @aspyn-io/tokens

import {
  Accordion,
  AccordionItem,
  AccordionTrigger,
  AccordionContent,
} from "@aspyn-io/kit";

FAQ (single open)

<Accordion type="single" collapsible>
  <AccordionItem value="billing">
    <AccordionTrigger>How does billing work?</AccordionTrigger>
    <AccordionContent>Per-seat, monthly or annual.</AccordionContent>
  </AccordionItem>
  …
</Accordion>

Multiple open

Open by default.

<Accordion type="multiple" defaultValue={["a", "b"]}>…</Accordion>