Collapsible

Simple disclosure for showing and hiding supporting content.

This release focuses on reducing friction across setup, review, and team handoff.

Setup flow

Workspace creation now takes three fewer steps.

3 steps saved

Dashboard states

Empty and loading states were reduced into one cleaner path.

Cleaner

Approval handoff

Frequent review flows now need fewer confirmation screens.

Faster review

Installation

npx shadcn@latest add @iconiq/r-collapsible

ReducedMotion

Pass reducedMotionwhen you want the installed component to settle into its quieter motion path immediately. Leaving the prop unset still respects the user's system-level reduced motion preference.

This release focuses on reducing friction across setup, review, and team handoff.

Setup flow

Workspace creation now takes three fewer steps.

3 steps saved

Dashboard states

Empty and loading states were reduced into one cleaner path.

Cleaner

Approval handoff

Frequent review flows now need fewer confirmation screens.

Faster review

Props

Collapsible

6 props

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

Defaultfalse

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

Defaultfalse

Disables the root and prevents trigger interaction on both providers.

classNamestring

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

reducedMotionboolean

Forces the quieter motion path immediately while still respecting system-level reduced motion preferences.

Notes

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.

Exports

2 props

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.