Accordion
Stacked sections that expand one at a time. For FAQs and long settings pages, not for primary content.
We break the scope into milestones, each with a demo date. You see working software at every milestone, not a status report.
Usage
import {
Accordion,
AccordionContent,
AccordionItem,
AccordionTrigger,
} from "@zynactra/ui/accordion"<Accordion defaultValue={["item-1"]}>
<AccordionItem value="item-1">
<AccordionTrigger>Is it accessible?</AccordionTrigger>
<AccordionContent>Yes. It follows the WAI-ARIA disclosure pattern.</AccordionContent>
</AccordionItem>
</Accordion>Examples
Multiple
Add multiple to let several sections stay open. defaultValue takes an array either way.
Typecheck, lint and compile every package. Fails the pipeline on the first error.
Publish the packages and the docs site once the checks above pass.
Guidelines
- Write triggers as the question or the section name, not "More info".
- Don't hide anything the user needs to finish the task. If most people open it, show it.
- One level only. Nested accordions are a sign the page needs splitting.
API reference
Behaviour and props come from Base UI. See the Base UI Accordion docs.