Components
Installation
pnpm dlx shadcn@latest add https://basecn.dev/r/accordion.jsonor
If you are using a namespaced registry, you can use the following command:
pnpm dlx shadcn@latest add @basecn/accordionExamples
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 multiple prop to the Accordion component to control the accordion type. When multiple is true, the accordion behaves as type multiple; when false, it behaves as type single.
The default value for multiple is true.
import { Accordion, AccordionItem, AccordionTrigger } from "@/components/ui/accordion"
<Accordion multiple={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>