CatalystCollapsiblev0.1.12Ready for Production
An interactive component that expands and collapses content sections with smooth animations, built on Radix UI Collapsible primitives.
Prefer AI-assisted development?
Catalyst Collapsible wraps Radix UI's Collapsible primitive with zero additional configuration — you get smooth expand/collapse animations, full keyboard support, and correct ARIA semantics out of the box.
Installation
npm install @pmi/catalyst-collapsibleimport { CollapsibleRoot, CollapsibleTrigger, CollapsibleContent } from '@pmi/catalyst-collapsible';API Reference
Collapsible is a compound component built on Radix UI primitives. The sections below summarize the API surface for each part.
CollapsibleRoot
The root container that manages open/closed state and context. Accepts all standard Radix Collapsible Root props and forwards ref to the underlying element.
CollapsibleTrigger
Button that toggles the collapsible content visibility. Accepts all standard Radix Collapsible Trigger props and forwards ref.
CollapsibleContent
Container for the content that expands and collapses. Accepts all standard Radix Collapsible Content props and forwards ref.
Use forceMount to keep the content in the DOM even when closed (useful for animations or SEO).
Accessibility
Collapsible is designed to meet WCAG 2.2 AA standards. Keyboard behavior and ARIA semantics are inherited from Radix UI.
ARIA
aria-expandedis automatically set to"true"/"false"on the trigger to reflect open state.aria-controlslinks the trigger to the content region.- The trigger renders with
role="button"from Radix; useasChildwith a native<button>for full semantic correctness. - Always provide descriptive visible text in the trigger so screen readers can identify what will be revealed.
See the Radix Collapsible accessibility docs for inherited baseline behavior.
Choosing the Right Component
Use Collapsible when you need a single independently toggled content section. Reach for a different primitive when:
| If you need… | Use instead |
|---|---|
| Multiple sections where only one can be open at a time | Accordion |
| Content revealed in an overlay layer (modal, sheet) | Dialog |
| A menu-style list of toggleable items triggered by a button | Dropdown Menu |
Related
Aspect Ratio
A primitive component for maintaining consistent aspect ratios for media content, particularly images.
ScrollArea
A custom scrollbar component for product interfaces with customizable styling via className overrides. Supports vertical/horizontal scrolling, container queries, and brand theming.