Collapsible

Installation

Usage

<Collapsible>
  <CollapsibleTrigger />
  <CollapsibleContent />
</Collapsible>

Examples

Reduce Motion

Animation Presets

Motion

Motion Blur

Perspective

Perspective Blur

Fade

Scale

None

Custom Animation

You can use any Motion Animation values:

Learn more

Transition Presets

Each animation comes with predefined transitionPreset

Alternatively, you can choose transition from this list:

Additionaly, you can control the duration of the transition:

<Collapsible
  animationPreset="motion"
  transitionPreset={{
    ease: "inOutExpo",
    duration: 0.6,
  }}
/>

Custom Transitions

You can use any Motion Transition values:

Learn more

API Reference

Collapsible

Support all Root Radix API

Trigger

Support all Radix API

Content

Support all Radix API