Animate UI

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.