Accordion

Collapsible sections built on Radix's Accordion primitive for correct single/multiple expansion modes and arrow-key navigation between triggers.

<Accordion type="single" collapsible className="ui-w-80">
  <AccordionItem value="a">
    <AccordionTrigger>What frameworks does this support?</AccordionTrigger>
    <AccordionContent>Any React 18+ app — Next.js, Remix, Vite, or plain CRA.</AccordionContent>
  </AccordionItem>
  <AccordionItem value="b">
    <AccordionTrigger>Is it tree-shakeable?</AccordionTrigger>
    <AccordionContent>Yes — every component has its own build entry point.</AccordionContent>
  </AccordionItem>
</Accordion>

Editable — change the code above and the preview updates live.

Installation

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

Props

type="single" allows one open item at a time; type="multiple" allows several. Pass collapsible to allow closing the last open item in single mode. AccordionItem requires a unique value; the rest follow Radix's Accordion API directly.