Animate UI

Collapsible

An interactive component which expands/collapses a panel.

Made by imskyleen
Edit on GitHub
Open in

Installation

Usage

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

API Reference

Collapsible

Radix UI API Reference - Collapsible.Root

CollapsibleTrigger

Radix UI API Reference - Collapsible.Trigger

CollapsibleContent

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

The asChild and forceMount props are not supported in the CollapsibleContent component as it is used for animation.

Credits

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