Loading...
An interactive component which expands/collapses a panel.
Full keyboard navigation
Can be controlled or uncontrolled
Animated with Motion
Respects reduce motion with system settings and through props
Built with:
You can use any Motion values:
Each animation comes with predefined
Alternatively, you can choose transition from this list:
Additionaly, you can control the duration of the transition:
You can use any Motion values:
| Prop | Type | Default |
|---|---|---|
animation | AnimationProps | ― |
animationPreset | enum | "fade" |
transition | Transition | ― |
transitionPreset | enumTransitionPreset | ― |
reduceMotion | boolean | false |
<Collapsible>
<CollapsibleTrigger />
<CollapsibleContent />
</Collapsible>
AnimationtransitionPresetdefaultanticipatequickOutovershootOutswiftOutsnappyOutinOutinQuadinCubicinQuartinQuintinExpoinCircoutQuadoutCubicoutQuartoutQuintoutExpooutCirc<Collapsible
animationPreset="motion"
transitionPreset={{
ease: "inOutExpo",
duration: 0.6,
}}
/>
TransitionRootTriggerContentinOutQuadinOutCubicinOutQuartinOutQuintinOutExpoinOutCircinOutBaseinoutlinear