Accordion
A vertically stacked set of interactive headings that each reveal an associated section of content, built on Radix UI's Accordion primitive.
Install
npx shadcn@latest add https://atomx.acau.net/r/accordion.jsonUsage
Accordion wraps Radix UI's Accordion.Root and handles keyboard navigation, focus management, and aria wiring for you. Use it to condense long content — FAQs, settings groups, nested details — into expandable sections.
Set type="single" so only one item is open at a time, or type="multiple" to allow several. With type="single", add collapsible to let the open item be closed again. Every AccordionItem needs a unique value.
<Accordion type="single" collapsible>
<AccordionItem value="item-1">
<AccordionTrigger>Is it accessible?</AccordionTrigger>
<AccordionContent>Yes. It follows the WAI-ARIA design pattern.</AccordionContent>
</AccordionItem>
</Accordion>Preview
Single (collapsible)
A shadcn/ui-compatible registry. Components are copied into your project as source files you own.
Multiple
Props
Accordion extends React.ComponentProps<typeof AccordionPrimitive.Root>. All Radix Accordion props are forwarded.
| Prop | Type | Notes |
|---|---|---|
type | "single" | "multiple" | Required. Whether one or many items can be open. |
collapsible | boolean | single only — allows the open item to be closed. |
value / defaultValue | string | string[] | Controlled / uncontrolled open item(s). |
onValueChange | (value) => void | Fired when the open item(s) change. |
disabled | boolean | Disables the entire accordion. |
AccordionItem requires a unique value. AccordionTrigger and AccordionContent extend their matching Radix primitives.