Components
Accordion
A set of collapsible panels with headings.
Installation
pnpm dlx shadcn@latest add https://basecn.dev/r/accordion.jsonExamples
Tabs
With Icon
With Plus Minus Indicator
Multiple Items Open
Migrating from Radix UI
Common Migration Steps
All components share several migration patterns when moving from Radix UI to Base UI. Before proceeding with component-specific changes, review the essential migration patterns.
Familiarizing yourself with these patterns will make the component-specific migration steps much clearer.
Accordion Type
In Radix UI, you can pass the type prop to the Accordion component to change the accordion type to either single or multiple.
import { Accordion, AccordionItem, AccordionTrigger } from "@/components/ui/accordion"
<Accordion type="single" collapsible>
<AccordionItem value="item-1">
<AccordionTrigger>Is it accessible?</AccordionTrigger>
<AccordionContent>
Yes. It adheres to the WAI-ARIA design pattern.
</AccordionContent>
</AccordionItem>
</Accordion>With Base UI, you can pass the boolean openMultiple prop to the Accordion component to control the accordion type. When openMultiple is true, the accordion behaves as type multiple; when false, it behaves as type single.
The default value for openMultiple is true.
import { Accordion, AccordionItem, AccordionTrigger } from "@/components/ui/accordion"
<Accordion openMultiple={false}> // Same as type="single"
<AccordionItem value="item-1">
<AccordionTrigger>Is it accessible?</AccordionTrigger>
<AccordionContent>
Yes. It adheres to the WAI-ARIA design pattern.
</AccordionContent>
</AccordionItem>
</Accordion>