Collapsible

Simple disclosure for showing and hiding supporting content.

Installation

npx shadcn@latest add @iconiq/r-collapsible

Provider-switchable disclosure surface with the same root, trigger, and content API on Base UI and Radix UI.

openboolean

Controlled open state for the root. Pass this when a parent needs to own expansion.

defaultOpenboolean

Default false

Initial open state for uncontrolled usage. The component manages future toggles internally.

onOpenChange(open: boolean) => void

Called whenever the root opens or closes, regardless of which provider is installed underneath.

disabledboolean

Default false

Disables the root and prevents trigger interaction on both providers.

classNamestring

Merged onto the rounded card shell that wraps the trigger and content.

Current install target: Radix UI.

Dependencies declared by this registry entry: @radix-ui/react-collapsible, motion, lucide-react.

Installs a Radix collapsible with the same trigger and content API as the Base UI version.

Uses Motion-driven height expansion, chevron rotation, and inner copy easing on top of Radix content semantics.

The generated registry file is /r/r-collapsible.json.

Both registry entries ship the same three-part composition so you can keep one collapsible structure while swapping the headless library below it.

CollapsibleTriggerButtonHTMLAttributes<HTMLButtonElement>

Pre-styled trigger button with the built-in chevron and motion-aware press and hover feedback.

CollapsibleContentHTMLAttributes<HTMLDivElement>

Animated content region with height expansion and an inner text wrapper that eases independently.