25
A vertically stacked set of collapsible sections.
npx neobrutal add accordionOr install the dependency and copy the code:
npm install @base-ui/reactimport {
Accordion,
AccordionContent,
AccordionItem,
AccordionTrigger,
} from "@/components/ui/accordion"<Accordion>
<AccordionItem value="item-1">
<AccordionTrigger>Section Title</AccordionTrigger>
<AccordionContent>
Section content goes here.
</AccordionContent>
</AccordionItem>
</Accordion>Allow multiple sections to be open at once.
Set a section to be open by default.
| Prop | Type | Default | Description |
|---|---|---|---|
| defaultValue | any[] | - | The uncontrolled value of the item(s) that should be initially expanded. |
| value | any[] | - | The controlled value of the item(s) that should be expanded. |
| onValueChange | (value: any[], eventDetails) => void | - | Event handler called when an accordion item is expanded or collapsed. |
| hiddenUntilFound | boolean | false | Allows the browser's built-in page search to find and expand the panel contents. |
| loopFocus | boolean | true | Whether to loop keyboard focus back to the first item when the end is reached. |
| multiple | boolean | false | Whether multiple items can be open at the same time. |
| disabled | boolean | false | Whether the component should ignore user interaction. |
| orientation | "vertical" | "horizontal" | "vertical" | The visual orientation of the accordion. |
| Prop | Type | Default | Description |
|---|---|---|---|
| value | any | - | A unique value that identifies this accordion item. |
| onOpenChange | (open: boolean, eventDetails) => void | - | Event handler called when the panel is opened or closed. |
| disabled | boolean | false | Whether the component should ignore user interaction. |
| Prop | Type | Default | Description |
|---|---|---|---|
| nativeButton | boolean | true | Whether the component renders a native button element. |
| Prop | Type | Default | Description |
|---|---|---|---|
| hiddenUntilFound | boolean | false | Allows the browser's built-in page search to find and expand the panel contents. |
| keepMounted | boolean | false | Whether to keep the element in the DOM while the panel is closed. |