CatalystAccordionv0.7.2Ready for Production
A vertically stacked set of interactive headings that each reveal an associated section of content.
Prefer AI-assisted development?
Catalyst Accordion extends Radix UI Accordion with built-in design tokens and accessibility defaults, plus Tailwind-based styling — giving you a production-ready component with zero configuration.
Installation
npm install @pmi/catalyst-accordionimport {
AccordionRoot,
AccordionItem,
AccordionHeader,
AccordionTrigger,
AccordionContent,
} from "@pmi/catalyst-accordion";Add the Accordion Tailwind preset to your tailwind.config.ts:
import accordionPreset from "@pmi/catalyst-accordion/tailwind.config";
export default {
presets: [accordionPreset],
// ...
};Common Patterns
Single
This example demonstrates a common composition pattern using a single accordion, where one item expands at a time.
The same approach can also be adapted for multiple accordion items when needed.
In AccordionRoot, add prop type="single".
When type is single, use collapsible as true to allow closing content when clicking the trigger for an open item.
API Reference
AccordionRoot
The root container that manages the accordion group and its expansion mode.
Accepts all standard Radix Accordion Root props and forwards ref to the underlying Radix accordion root element.
Prop
Type
AccordionItem
A single collapsible section inside the accordion.
Accepts all standard Radix Accordion Item props and forwards ref to the underlying Radix accordion item element.
Prop
Type
AccordionHeader
The header wrapper that contains the trigger for each accordion item.
Accepts all standard Radix Accordion Header props and forwards ref to the underlying Radix accordion header element.
Prop
Type
AccordionTrigger
The interactive button that expands or collapses the associated content.
Accepts all standard Radix Accordion Trigger props and forwards ref to the underlying Radix accordion trigger element.
Prop
Type
AccordionContent
The collapsible panel that reveals the accordion item's content.
Accepts all standard Radix Accordion Content props and forwards ref to the underlying Radix accordion content element.
Prop
Type
See the Radix UI Accordion API for the full props reference.
Accessibility
Keyboard Interactions
| Key | Action |
|---|---|
ArrowDown / ArrowRight | Moves focus to the next trigger in the accordion. Use ArrowDown for vertical accordions and ArrowRight for horizontal accordions. |
ArrowUp / ArrowLeft | Moves focus to the previous trigger in the accordion. Use ArrowUp for vertical accordions and ArrowLeft for horizontal accordions. |
Home | Moves focus to the first accordion trigger. |
End | Moves focus to the last accordion trigger. |
ARIA
- Catalyst adds
role="region"toAccordionContent. - Accordion inherits its ARIA semantics from Radix: triggers are buttons with
aria-expandedandaria-controls, and panel content is rendered as a labeled region.
See the Radix UI Accordion accessibility docs for inherited baseline behavior.
Choosing the Right Component
Use Accordion when you need to group related content into independently expandable sections while keeping the page scannable.
Reach for a different primitive when:
| If you need… | Use instead |
|---|---|
| A single show/hide section with less structure | Collapsible |
| Peer panels that users switch between instead of expanding one below another | Tabs |
| Critical information that should always be visible | Alert |
| Multi-step progression or ordered completion flow | Stepper |
Related
- Collapsible - For show/hide sections that can be expanded independently.
- Tabs - For peer panels the user switches between instead of expanding content.