Collapsible

A collapsible panel controlled by a button.

Made by imskyleen
Edit on GitHub
Open in

Installation

Usage

<Collapsible>
  <CollapsibleTrigger>Collapsible Trigger</CollapsibleTrigger>
  <CollapsiblePanel>
    <div>Collapsible Content</div>
  </CollapsiblePanel>
</Collapsible>

API Reference

Collapsible

Base UI API Reference - Collapsible.Root

CollapsibleTrigger

Base UI API Reference - Collapsible.Trigger

CollapsiblePanel

Base UI API Reference - Collapsible.Panel
PropTypeDefault
transition?
Transition
{ type: 'spring', stiffness: 150, damping: 22 }
keepRendered?
boolean
false
...props?
HTMLMotionProps<"div">
-

The render and keepMounted props are not supported in the CollapsiblePanel component as it is used for animation.

Credits

Built by Skyleen. The source code is available on GitHub.

Last updated: 10/4/2025