A vertically stacked set of interactive headings that each reveal a section of content.
What is this component for?
Is it styled according to DESIGN.md?
Installation
$ pnpm dlx shadcn@latest add "https://ui.manpuc.me/r/accordion.json"
Copy Usage
After you add the component with the CLI, import it from your UI folder:
Copy import { Accordion, AccordionContent, AccordionItem, AccordionTrigger, } from "@/components/ui/accordion" ;
export function MyComponent () { return ( < 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 > ); } Examples
Multiple
Allow multiple items to be open at the same time by setting the type prop to "multiple".
Disabled
You can disable specific accordion items by adding the disabled prop to the AccordionItem.
API Reference
The Accordion components extend standard HTML attributes and radix-ui primitives.
Prop Type Default Description type`"single" "multiple"` "single"value`string string[]` - defaultValue`string string[]` - onValueChange`(value: string string[]) => void` - collapsiblebooleanfalseWhen type is "single", allows closing content when clicking trigger for an open item. disabledbooleanfalseWhen true, prevents the user from interacting with the accordion and all its items. dir`"ltr" "rtl"` "ltr"orientation`"horizontal" "vertical"` "vertical"asChildbooleanfalseChange the default rendered element for the one passed as a child, merging their props and behavior.